更改基于数组的元素的类答案

【问题标题】：Changing Class on array based elements更改基于数组的元素的类
【发布时间】：2017-08-20 06:30:15
【问题描述】：

我有大约 20-100 个元素，每个元素在文本上都有自己的 ID“xxx_view_ch_&&&”，包裹在 ID 为“xxx_view_&&&”的外部 div 中。当用户单击整个元素（“xxx_view_&&&”）时，我想更改 ID 为“xxx_view_ch_&&&”的元素上的类。

我目前使用这个代码：

$(document).ready(function(){

  $('#reci_view_01').click(function(){
   $('#reci_view_ch_01').toggleClass('not_active header');   });

  $('#reci_view_02').click(function(){
   $('#reci_view_ch_02').toggleClass('not_active header');   });
   
  $('#reci_view_03').click(function(){
   $('#reci_view_ch_03').toggleClass('not_active header');   });
   
  $('#reci_view_04').click(function(){
   $('#reci_view_ch_04').toggleClass('not_active header');   });
   
  $('#reci_view_05').click(function(){
   $('#reci_view_ch_05').toggleClass('not_active header');   });

});

.not_active {
  text-decoration: line-through !important;
  color: darkgray;
  font-weight: bold;
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css">

    <div class="ui list">
      <a id="reci_view_01" class="item">
        <i class="remove circle outline icon"> </i>
        <div class="content">
          <div id="reci_view_ch_01" class="header">Test 1</div>
        </div>
      </a>
      <a id="reci_view_02" class="item">
        <i class="remove circle outline icon"> </i>
        <div class="content">
          <div id="reci_view_ch_02" class="header">Test 2</div>
        </div>
      </a>
      <a id="reci_view_03" class="item">
        <i class="remove circle outline icon"> </i>
        <div class="content">
          <div id="reci_view_ch_03" class="header">Test 3</div>
        </div>
      </a>
      <a id="reci_view_04" class="item">
        <i class="remove circle outline icon"></i>
        <div class="content">
          <div id="reci_view_ch_04" class="header">Test 4</div>
        </div>
      </a>
      <a id="reci_view_05" class="item">
      <i class="remove circle outline icon"></i>
        <div class="content">
          <div id="reci_view_ch_05" class="header">Test 5</div>
        </div>
      </a>
    </div>

我想制作一个类似“待办事项列表”的列表，我可以在其中选择要添加到其他列表中的项目。我认为数组中可能有一种方法，但我对 JavaScript 知之甚少。

【问题讨论】：

那么，您的脚本就像您希望的那样工作，但您想要一个更优雅、更漂亮的解决方案？你问的是这个吗？
您可以使用 jquery 选择器，例如 find 并识别模式（以结尾），匹配的模式绑定将适合您绑定事件。
@mnemosdev 是的，因为它应该是 Web 应用程序的一小部分，它必须是高性能的。在这种情况下的问题是，我使用 MySQL 数据库，其中站点是根据数据库的实时内容创建的。物品的数量可以从 5 到 200 不等。

标签： javascript jquery html css arrays

【解决方案1】：

为此，您可以使用公共类将事件挂钩到所有.item 元素。然后就可以使用DOM遍历到find()需要的子元素了。

在这种情况下，我添加了 reci_view 和 reci_view_ch 类：

$('.reci_view').click(function() {
  $(this).find('.reci_view_ch').toggleClass('not_active header');
});

.not_active {
  text-decoration: line-through !important;
  color: darkgray;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css">

<div class="ui list">
  <a id="reci_view_01" class="item reci_view">
    <i class="remove circle outline icon"> </i>
    <div class="content">
      <div id="reci_view_ch_01" class="header reci_view_ch">Test 1</div>
    </div>
  </a>
  <a id="reci_view_02" class="item reci_view">
    <i class="remove circle outline icon"> </i>
    <div class="content">
      <div id="reci_view_ch_02" class="header reci_view_ch">Test 2</div>
    </div>
  </a>
  <a id="reci_view_03" class="item reci_view">
    <i class="remove circle outline icon"> </i>
    <div class="content">
      <div id="reci_view_ch_03" class="header reci_view_ch">Test 3</div>
    </div>
  </a>
  <a id="reci_view_04" class="item reci_view">
    <i class="remove circle outline icon"></i>
    <div class="content">
      <div id="reci_view_ch_04" class="header reci_view_ch">Test 4</div>
    </div>
  </a>
  <a id="reci_view_05" class="item reci_view">
    <i class="remove circle outline icon"></i>
    <div class="content">
      <div id="reci_view_ch_05" class="header reci_view_ch">Test 5</div>
    </div>
  </a>
</div>

【讨论】：