There is a span whose class corresponds to the class of the hidden div, which contains the image.

When you click on a span corresponding div appears.

The script looks like this:

 <script> $( "span.123" ).click(function() { $( "div.123" ).fadeToggle(function() { }); }); </script>

And to be more precise, in the code instead of 123 there is a php code that displays the desired value:

 <?php the_field('number_1'); ?>

Those. the whole code looks like this:

 <script> $( "span.<?php the_field('number_1'); ?>" ).click(function() { $( "div.<?php the_field('number_1'); ?>" ).fadeToggle(function() { }); }); </script>

The problem is that span.<?php the_field('number_1'); ?> span.<?php the_field('number_1'); ?> and div.<?php the_field('number_1'); ?> div.<?php the_field('number_1'); ?> can be up to 30 pieces.

The value of the class can contain both numbers and Latin alphabetic characters.

The final html looks like this:

 <div id="wrapper"> <span class="random_nubmer_1"></span> <span class="random_nubmer_2></span> <span class=" random_nubmer_3></span> <!--И так далее...--> </div> <div id="wrapper_2"> <div class="random_nubmer_1"></div> <div class="random_nubmer_2></div> <div class=" random_nubmer_3></div> И так далее... </div>

When you click on <span class="random_nubmer_1"></span> , <div class="random_nubmer_1"></div> displayed, and the rest are hidden.

Question : how to combine all 30 pieces in one code?

I attach a schematic example of what I want to get:

If possible, please explain with comments.

  • question: is each div placed in its span? or what does the final html look like? and what are these classes for? Do they contain their individual parameters in css? or just to output numbers to div? - Alexey Shimansky
  • No, the span divs exist independently of each other. The class is needed to identify the block, you can place the class for the div id. In general, this is similar to the way the product colors are switched on the online store page. - Frontendman
  • Can you still add the final html to the question? What she looks like - Alexey Shimansky
  • The markup looks like this: <div id="wrapper"> <span class="random_nubmer_1"></span> <span class="random_nubmer_2></span> <span class="random_nubmer_3></span> <!--И так далее...--> </div> <div id="wrapper_2"> <div class="random_nubmer_1"></div> <div class="random_nubmer_2></div> <div class="random_nubmer_3></div> И так далее... </div> When you click on <span class="random_nubmer_1"></span> <div class="random_nubmer_1"></div> displayed and the rest are hidden. - Frontendman

1 answer 1

In fact, you do not need to assign any classes.

enter image description here

Because you already have matching elements, it turns out that the first span in the wrapper block corresponds to the first div in the wrapper_2 block, the second to the second, the third to the third, and so on.

Based on this, we make the logic:

  • Determine the index of the span on which the click was made.
  • Hide all wrapper_2 in the wrapper_2 block
  • Show a div with the same index as the span on which clicked
  • Everything

 $('#wrapper').on('click', 'span', function(){ var elIndex = $(this).index(); $('#wrapper_2 div').hide(); $('#wrapper_2 div').eq( elIndex ).fadeToggle(); }); 
 span { border: 1px solid red; padding: 5px; } #wrapper_2 { margin-top: 10px; } #wrapper_2 div { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <span class="random_nubmer_1">span1</span> <span class="random_nubmer_2">span2</span> <span class="random_nubmer_3">span3</span> <!--И так далее...--> </div> <div id="wrapper_2"> <div class="random_nubmer_1">div11</div> <div class="random_nubmer_2">div22</div> <div class="random_nubmer_3">div33</div> <!--И так далее...--> </div>

  • could the second time $('#wrapper_2 div') not write :) you have it all on one set going on - Grundy
  • @Grundy is so clearer simply, it seems to me, just correspond to the points that I have listed - Alexey Shimansky