javascript - 单击 div 1，打开新内容。单击 div 2 打开 div1 的内容

Question

我有很多装有不同内容的盒子。

如果单击第一个框，您可以看到一个包含更多详细信息的弹出框。 如果单击第二个、第三个等框，您必须查看这些框的详细信息。

我的问题:如果我点击框号。 2 我看到了盒子号的详细信息。 1.

HTML:

<div id="fade" class="black_overlay"></div>

<div id="openDiv" class="openDiv case1 col-xs-12">
  <div class="col-xs-12">
    <img src="https://placehold.it/100x50/ffffff/000000" alt="#" />
  </div>
  <div class="col-xs-12 content">
    <p>Some Stuff here</p>
  </div>
  <div id="light" class="white_content">
    <p>Case 1! More Stuff. Say Hello!</p>
    <a href="#" class="openDiv" id="closeDiv">Close</a>
  </div>
q</div>

<div id="openDiv" class="openDiv case2 col-xs-12">
  <div class="col-xs-12">
    <img src="https://placehold.it/100x50" alt="#" />
  </div>
  <div class="col-xs-12 content">

    <p>Some Stuff here</p>
  </div>
  <div id="light" class="white_content">
    <p>Case 2! More Stuff. Say Hello!</p>
    <a href="#" class="openDiv" id="closeDiv">Close</a>
  </div>
</div>

Jquery:

function clickCase() {

  $(".openDiv").click(function() {
   $("#light").toggle();
   $("#fade").toggle();

  });
 $("#closeDiv").click(function() {

   $("#light").toggle();
   $("#fade").toggle();
  });
}

以下是完整代码:http://jsfiddle.net/jvynbq1u/

Answer 1

只需更新功能

function clickCase() {
  $(".openDiv").click(function() {    
        $(this).find("#light").toggle(); 
        $("#fade").toggle();
  });  

  $(".closeDiv").click(function() {
        $(this).find("#light").toggle();    
        $("#fade").toggle();   
  }); }

并更改 HTML 中的类以关闭

<div id="openDiv" class="openDiv case1 col-xs-12">
  <div class="col-xs-12">
    <img src="https://placehold.it/100x50/ffffff/000000" alt="#" />
  </div>
  <div class="col-xs-12 content">
    <p>Some Stuff here</p>
  </div>
  <div id="light" class="white_content">
    <p>Case 1! More Stuff. Say Hello!</p>
    <a href="#" class="openDiv closeDiv" id="">Close</a>
  </div>
</div>

<div id="openDiv" class="openDiv case2 col-xs-12">
  <div class="col-xs-12">
    <img src="https://placehold.it/100x50" alt="#" />
  </div>
  <div class="col-xs-12 content">

    <p>Some Stuff here</p>
  </div>
  <div id="light" class="white_content">
    <p>Case 2! More Stuff. Say Hello!</p>
    <a href="#" class="openDiv closeDiv" id="closeDiv">Close</a>
  </div>
</div>

并且不要忘记将“closeDiv”添加到具有此 ID 的元素类中。它在 JSFiddle 上为我工作。 <强> http://jsfiddle.net/jvynbq1u/9/

当你想在多个元素上添加一个函数时，也请使用类，而不是 id。一个特定 ID 只能用于页面上的一个元素。