Блог

Мне нужно показывать / скрывать divs по щелчку несколько раз на одной странице. Каждая кнопка должна влиять только на свои дочерние элементы.

Я могу заставить это работать для одного контейнера, вот так:

HTML:

 <div class="container">

  <div class="buttons">
    <a  class="showSingle" target="1">Div 1</a>
    <a  class="showSingle" target="2">Div 2</a>
    <a  class="showSingle" target="3">Div 3</a>
  </div>

  <div id="div1" class="targetDiv">Lorum Ipsum1</div>
  <div id="div2" class="targetDiv">Lorum Ipsum2</div>
  <div id="div3" class="targetDiv">Lorum Ipsum3</div>

</div>
  

JS:

 jQuery(function(){

        jQuery('.showSingle').click(function(){
              jQuery('.targetDiv').hide();
              jQuery('#div' $(this).attr('target')).show();
        });
});
  

Но я не могу для нескольких контейнеров: JSFiddle

Я знаю, это звучит глупо, но я пытался обернуть это в each() функцию или использовать children() , но не смог заставить это работать. Спасибо

ПРИМЕЧАНИЕ: Я не могу добавлять идентификаторы в контейнеры, поскольку они генерируются динамически

Почему бы вам не использовать closest() с find()

closest() получит ближайший селектор, а затем вы сможете найти нужные дочерние элементы только для уважаемого родителя.

 $('.showSingle').click(function(){
      $(this).closest('.container').find('.targetDiv').hide();
      $(this).closest('.container').find('#div' $(this).attr('target')).show();
});
  

К вашему сведению, не рекомендуется использовать один и тот же идентификатор для нескольких элементов в DOM, используйте class вместо ID.

 jQuery(function(){
         jQuery('#showall').click(function(){
               jQuery('.targetDiv').show();
        });
        $('.showSingle').click(function(){
      
          $(this).closest('.container').find('.targetDiv').hide();
      $(this).closest('.container').find('#div' $(this).attr('target')).show();
});
});  

 .container {
  margin-top: 20px;
}  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="buttons">
  <a  class="showSingle" target="1">Div 1</a>
  <a  class="showSingle" target="2">Div 2</a>
  <a  class="showSingle" target="3">Div 3</a>
  <a  class="showSingle" target="4">Div 4</a>
  </div>

  <div id="div1" class="targetDiv">Lorum Ipsum1</div>
  <div id="div2" class="targetDiv">Lorum Ipsum2</div>
  <div id="div3" class="targetDiv">Lorum Ipsum3</div>

</div>

<div class="container">

  <div class="buttons">
  <a  class="showSingle" target="1">Div 1</a>
  <a  class="showSingle" target="2">Div 2</a>
  <a  class="showSingle" target="3">Div 3</a>
  <a  class="showSingle" target="4">Div 4</a>
  </div>

  <div id="div1" class="targetDiv">Lorum Ipsum1</div>
  <div id="div2" class="targetDiv">Lorum Ipsum2</div>
  <div id="div3" class="targetDiv">Lorum Ipsum3</div>

</div>  

Рабочая скрипка.

1. id Атрибут должен быть уникальным в том же документе, поэтому вы должны изменить свои дубликаты id на классы.

2. Не используйте атрибут like target непосредственно в теге, пожалуйста, используйте data-* атрибуты, поэтому ваш атрибут должен быть data-target .

   Пример :

    <div class="container">
   
       <div class="buttons">
           <a  class="showSingle" data-target="1">Div 1</a>
           <a  class="showSingle" data-target="2">Div 2</a>
           <a  class="showSingle" data-target="3">Div 3</a>
           <a  class="showSingle" data-target="4">Div 4</a>
       </div>
   
       <div class="targetDiv div1">Lorum Ipsum1</div>
       <div class="targetDiv div2">Lorum Ipsum2</div>
       <div class="targetDiv div3">Lorum Ipsum3</div>
   
   </div>
     

3. Используйте closest() with find() для отображения / скрытия ваших divs и .data() для получения значения из data-* атрибутов :

    jQuery(function(){
       jQuery('.showSingle').click(function(){
           var target = jQuery(this).data('target');
           var parent = jQuery(this).closest('.container');
   
           parent.find('.targetDiv').hide();
           parent.find('.div' target).show();
       });
   });
     

Надеюсь, это поможет.

Это может помочь вам,

 jQuery(function(){
  jQuery('.showSingle').click(function(){
       var target = jQuery(this).attr('target');
       var targetDiv = jQuery("#div" target);
       jQuery(this).parents('.container').find('.targetDiv').hide(); 
       jQuery(this).parents('.container').find(targetDiv).show();
   });
});