javascript - 如果 div 类名匹配，则单击时显示/隐藏 div

Question

我有两组 div — 一组是“主”div，一组是“额外”div。这两个类都有通过 CMS 引入的类。

在点击时显示/隐藏(最好是slideToggle)与所点击的 div 相对应的每个 div 的最佳方式是什么？

<div class="each-business-content-main" data-id="group-1"></div>
<div class="each-business-content-main" data-id="group-2"></div>
<div class="each-business-content-extra group-1"></div>
<div class="each-business-content-extra group-2"></div>

这些“group-1”或“group-2”类事先并不知道，因此无法进行硬编码。本质上我想知道，如果您单击一个 div，它会显示另一个 div (只要它们共享相同的类名)。

到目前为止我已经尝试过:

$('.each-business-content-main').on('click', function (e) {
        e.preventDefault();
    var id = $(this).data('id');
    jQuery('.each-business-content-extra').slideUp();
    jQuery('.each-business-content-extra .' + id).slideDown();
});

但我猜 hrefs 和 id 可能会有用？或者其他一些数据 ID...

Answer 1

如果你为你的 div 分配一个数据属性，这就会变得非常简单:

<div class="each-business-content-main group-1" data-group="1">main 1</div>
<div class="each-business-content-main group-2" data-group="2">main 2</div>
<div class="each-business-content-extra group-1" data-group="1">extra 1</div>
<div class="each-business-content-extra group-2" data-group="2">extra 2</div>
$('.each-business-content-main').click(function () {
    $('.each-business-content-extra.group-' + $(this).data('group')).slideToggle();
});

<强> jsFiddle example