Показать несколько DIV при нажатии на Bootstrap Carousel

Question

DEMO JSFiddle

Я пытаюсь показать несколько DIV при нажатии кнопки. Например, я хочу показать все div с id = div1 только при нажатии кнопки Button1. Аналогично, покажите все div с id = div2 только при нажатии кнопки Button2. То же самое можно сказать и о других слайдах.

HTML:

<div class="container"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
     <div class="divA"> 
      <div class="divAA"> 
      <div id="div1" class="targetDiv"> 
       <p>Div1 Intro: Hidden until Button1 is clicked</p> 
      </div> 
      </div> 
      <p> 
      Div1 Short to be shown by default. 
      <span id="div1" class="targetDiv">Hidden span until Button1 is clicked</span> 
      </p> 
      <a class="showSingle" target="1">Button1</a> 
      <div class="divAAA"> 
      <div id="div1" class="targetDiv"> 
       <p> 
       Div1 Details: Hidden until Button1 is clicked. 
       </p> 
      </div> 
      </div> 
     </div> 
     </div> 

     <div class="item"> 
     <div class="divB"> 
      <div class="divBB"> 
      <div id="div2" class="targetDiv"> 
       <p>Div2 Intro: Hidden until Button1 is clicked 
       <span id="div2" class="targetDiv">Hidden span until Button1 is clicked</span> 
       </p> 
      </div> 
      </div> 
      <p> 
      Div2 Short 
      </p> 
      <a class="showSingle" target="2">Button2</a> 
      <div id="div2" class="targetDiv"> 
      <p> 
       Div2 Details: Hidden until Button2 is clicked. Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked. YOLO. 
      </p></div> 
     </div> 
     </div> 

     <div class="item"> 
     3 
     </div> 

     <div class="item"> 
     4 
     </div> 
    </div> 

    <!-- Left and right controls --> 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
    </div> 
</div> 

Javascript:

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

Answer 1

Вы не можете использовать один и тот же идентификатор для нескольких элементов. Вам нужно изменить идентификатор на класс.

Вы можете скрыть их изначально с помощью CSS - display:none, затем щелкнуть по кнопке можно с помощью селектора классов вместо селектора id.

Это измененный код.

В случае, если вы предпочитаете скрипку: https://jsfiddle.net/ga6gmy8m/2/

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

.carousel { 
 
    height: 200px; 
 
    overflow-x: hidden; 
 
    overflow-y: scroll; 
 
} 
 
.item { 
 
    text-align: center; 
 
} 
 
.div2,.div1{ 
 
    display:none; 
 
} 
 
.showSingle { 
 
    border: 1px solid #000; 
 
    padding: 5px 10px; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
     <div class="divA"> 
 
      <div class="divAA"> 
 
      <div class="div1" class="targetDiv"> 
 
       <p>Div1 Intro: Hidden until Button1 is clicked</p> 
 
      </div> 
 
      </div> 
 
      <p> 
 
      Div1 Short to be shown by default. 
 
      <span class="div1" class="targetDiv">Hidden span until Button1 is clicked</span> 
 
      </p> 
 
      <a class="showSingle" target="1">Button1</a> 
 
      <div class="divAAA"> 
 
      <div class="div1" class="targetDiv"> 
 
       <p> 
 
       Div1 Details: Hidden until Button1 is clicked. 
 
       </p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="item"> 
 
     <div class="divB"> 
 
      <div class="divBB"> 
 
      <div class="div2" class="targetDiv"> 
 
       <p>Div2 Intro: Hidden until Button1 is clicked 
 
       <span class="div2" class="targetDiv">Hidden span until Button1 is clicked</span> 
 
       </p> 
 
      </div> 
 
      </div> 
 
      <p> 
 
      Div2 Short 
 
      </p> 
 
      <a class="showSingle" target="2">Button2</a> 
 
      <div class="div2" class="targetDiv" style="display:none"> 
 
      <p> 
 
       Div2 Details: Hidden until Button2 is clicked. Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked. YOLO. 
 
      </p></div> 
 
     </div> 
 
     </div> 
 
    
 
     <div class="item"> 
 
     3 
 
     </div> 
 

 
     <div class="item"> 
 
     4 
 
     </div> 
 
    </div> 
 

 
    <!-- Left and right controls --> 
 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
    </div> 
 
</div>

Answer 2

Присвоить класс к элементам (дивы), которые вы хотите, чтобы показать, когда ДИВ нажата. Создайте один класс, который может быть назначен этим div. Помните, что не назначайте одинаковые идентификаторы элементу, так как это может быть проблемой.