Changing Class on array based elements

Question

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.

so, your script works like you want it to work, but you would like a more elegant and pretty solution? is that what you are asking? — 404answernotfound
– 404answernotfound, Commented Mar 27, 2017 at 13:51
you can use jquery selector like find and identify the pattern (end with) and matching pattern bind will suite you to bind the event . — Prageeth godage
– Prageeth godage, Commented Mar 27, 2017 at 13:53
@mnemosdev yes, cause it should be a little part of a web-app which has to be performant. The problem in this case is, that i work with MySQL Databases where the site is created based on the live-content of the Database. The amount of items can vary from 5 to 200. — CentrixDE
– CentrixDE, Commented Mar 27, 2017 at 14:03

Rory McCrossan · Accepted Answer · 2017-03-27 13:52:21Z

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>

Collectives™ on Stack Overflow

Changing Class on array based elements

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related