CODEWITHSUNDEEP
javascriptjqueryhtmlcssarrays
CentrixDE
CentrixDE

Reputation: 117

Changing Class on array based elements

I have about 20-100 Elements, each with its own ID "xxx_view_ch_&&&" on the text, wrapped in a outer div with the ID "xxx_view_&&&". I want to change the Class on the Element with the ID "xxx_view_ch_&&&", when the user clicks on the whole Element ("xxx_view_&&&").

I currently use this code: 

$(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>

I want to make a "ToDo-List" like list where i can choose which items i want to add to a other list. I thought there could be a way within a array but i don't really know much about JavaScript.

Upvotes: 1

Views: 59

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

To do this you can use common classes to hook the events to all the .item elements. Then you can use DOM traversal to find() the required child element.

In this case I added the reci_view and reci_view_ch classes:

$('.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>

Upvotes: 6

Related Questions