javascript - 单击事件切换所有类而不是正确的 block

Question

我有一些折叠/可折叠 block ，其中第一个 block 打开，第二个/第三个 block 关闭。它们在打开和关闭方面按照我想要的方式工作，但我无法理解如何更改功能以使加号和减号图标更改为正确的 block 。目前，无论我打开或关闭哪个 block ，所有内容都会同时发生变化。

如何更改功能以便切换的 block 更新正确的图标？

function toggleDiv(divId) {
$("#"+divId).toggle();
$('.product-toggle span.icon').toggleClass('icon-plus icon-minus')
}

HTML

<p><a href="javascript:toggleDiv('features');" class="product-toggle"><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">Features</span></a></p>
<div id="features">
    Features 
</div>

<p><a href="javascript:toggleDiv('specifications');" class="product-toggle"><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">Specifications</span></a></p>
<div id="specifications">
    Spec 
</div>

<p><a href="javascript:toggleDiv('faq');" class="product-toggle"><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">FAQ</span></a></p>
<div id="faq">
    FAQ 
</div>

Answer 1

首先让我说不......只是不!

将目标添加到标记中作为数据属性:

<div class="product-toggle" data-target="features">
  <p>
    <span class="icon icon-plus" aria-hidden="true"></span>
    <span class="toggle-title">Features</span>
  </p>
</div>
<div id="features">
    Features 
</div>

将监听器附加到 product-toggle 类，如下所示:

$(document).on('click', '.product-toggle', function() {
  var target = this.dataset.target;
  $('#'+target).toggle();
  $(this).find('span.icon').toggleClass('icon-plus icon-minus');
});

JsFiddle