在基于数组的元素上更改Class

时间:2017-03-27 13:49:25

标签: javascript jquery html css arrays

我有大约20-100个元素,每个元素都有自己的ID" xxx_view_ch_&&&"在文本上,用ID" xxx_view_&&&"包裹在外部div中。当用户点击整个元素时,我想用ID" xxx_view_ch_&&&"更改元素上的类(" xxx_view_&&&" )。

我目前使用此代码:



$(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>
&#13;
&#13;
&#13;

我想制作一个&#34; ToDo-List&#34;像列表,我可以选择我想要添加到其他列表的项目。我认为阵列中可能存在一种方式,但我对JavaScript并不是很了解。

1 个答案:

答案 0 :(得分:6)

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

在这种情况下,我添加了reci_viewreci_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>