javascript - 简化 jquery 中的冗余脚本来激活项目

Question

我有 3 行项目(svgs 及其描述)，它们的标记几乎相同；我刚刚为每个容器提供了一个附加的标识类，以便区分它们。我希望这样当我单击一行中一项的 svg 时，它不会停用其他项。每行发生的事件应该相互独立。

$('.container-a .holder').on('click', function() {
      var itemId = $(this).attr('data-itemid');
      console.log(itemId);
      $('.holder').removeClass('activated');
      $('.container-a .description').removeClass('activated');
      $('.item-'+itemId).addClass('activated');
    });

    $('.container-b .holder').on('click', function() {
      var itemId = $(this).attr('data-itemid');
      console.log(itemId);
      $('.holder').removeClass('activated');
      $('.container-b .description').removeClass('activated');
      $('.item-'+itemId).addClass('activated');
    });

    $('.container-c .holder').on('click', function() {
      var itemId = $(this).attr('data-itemid');
      console.log(itemId);
      $('.holder').removeClass('activated');
      $('.container-c .description').removeClass('activated');
      $('.item-'+itemId).addClass('activated');
    });

这就是我之前使用的方法，但是，它会在单击某些内容后停用其他所有内容，而不是仅停用该行中的其他所有内容。

$('.holder').on('click', function() {
  var itemId = $(this).attr('data-itemid');
  console.log(itemId);
  $('.holder').removeClass('activated');
  $('.description').removeClass('activated');
  $('.item-'+itemId).addClass('activated');
});

这是我的 html

<div class="container-a container">
  <div class="img-container">
    <div class="holder">
      <img src="src.svg">
    </div>

    <div class="holder">
      <img src="src.svg">
    </div>

    <div class="holder">
      <img src="src.svg">
    </div>
  </div>

  <div class="desc-container">

    <div class="description">
      <p>text</p>
    </div>

    <div class="description">
      <p>text</p>
    </div>

    <div class="description">
      <p>text</p>
    </div>

  </div>
</div>



<div class="container-b container">
  <div class="img-container">
    <div class="holder">
      <img src="src.svg">
    </div>

    <div class="holder">
      <img src="src.svg">
    </div>

    <div class="holder">
      <img src="src.svg">
    </div>
  </div>

  <div class="desc-container">

    <div class="description">
      <p>text</p>
    </div>

    <div class="description">
      <p>text</p>
    </div>

    <div class="description">
      <p>text</p>
    </div>

  </div>
</div>

<div class="container-c container">
  <div class="img-container">
    <div class="holder">
      <img src="src.svg">
    </div>

    <div class="holder">
      <img src="src.svg">
    </div>

    <div class="holder">
      <img src="src.svg">
    </div>
  </div>

  <div class="desc-container">

    <div class="description">
      <p>text</p>
    </div>

    <div class="description">
      <p>text</p>
    </div>

    <div class="description">
      <p>text</p>
    </div>

  </div>
</div>

有什么方法可以将其分解为一键点击功能而不是 3 次吗？

Answer 1

如果您提供 html 代码，您会给我们更多机会提供帮助，但现在您可以尝试

function change(element){
  var itemId = element.attr('data-itemid');
  console.log(itemId);
  $('.holder').removeClass('activated');
  $(element).find('.description').removeClass('activated');
  $('.item-'+itemId).addClass('activated');
}

$('.container-a .holder').on('click', function() {
      change(this);
    });