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

您应该使用不同的ID。这些id与唯一ID相同。

试用此代码并查看我的演示：

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

<div id="openDiv1" 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="light1" class="white_content">
    <p>Case 1! More Stuff. Say Hello!</p>
    <a href="#" class="openDiv" id="closeDiv">Close</a>
  </div>
</div>

<div id="openDiv2" 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="light2" class="white_content">
    <p>Case 2! More Stuff. Say Hello!</p>
    <a href="#" class="openDiv" id="closeDiv">Close</a>
  </div>
</div>



function clickCase() {

  $("#openDiv1").click(function() {
    $("#light1").toggle();
    $("#fade").toggle();

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

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


jQuery(document).ready(function() {
  clickCase();

});

Demo jsfiddle

Answer 2

您可以使用conditional ternary operator。

function clickCase() {
  $(".openDiv").click(function() {
    ($(this).attr('id') == "openDiv") ? $("#light").toggle() : $("#light1").toggle();
    $("#fade").toggle();
  });

  $("#closeDiv, #closeDiv1").click(function() {
    ($(this).attr('id') == ("openDiv" || "closeDiv")) ? $("#light").toggle() : $("#light1").toggle();
    $("#fade").toggle();
  });
}

jQuery(document).ready(function() {
  clickCase();
});

.openDiv {
  width: 200px;
  height: 200px;
  float: left;
  margin: 5px;
  padding: 5px;
}

.case1 {
  background-color: #00b5b5;
}

.case2 {
  background-color: #4c4c4c;
  color: white;
}

.black_overlay {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 1001;
  opacity: 0.8;
}

.white_content {
  color: #292929;
  display: none;
  position: fixed;
  top: 15%;
  left: 10%;
  width: 80%;
  height: 70%;
  padding: 5px 10px;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
</div>
<div id="openDiv1" 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="light1" class="white_content">
    <p>Case 2! More Stuff. Say Hello!</p>
    <a href="#" class="openDiv" id="closeDiv1">Close</a>
  </div>
</div>

对于多个元素，您可以使用三元链接

示例：

$(this).attr('id') == "openDiv") ? $("#light").toggle() : 
$(this).attr('id') == "openDiv1" ? $("#light1").toggle() : 
$(this).attr('id') == "openDiv2" ? $("#light2").toggle() : 
$("#light3").toggle();// keep expanding till you reach enough.

如果您需要检查多个元素，最好将$(this).attr('id')保存在变量中。

或者你也可以使用开关盒。

示例：

switch($(this).attr('id')){
  case "openDiv": $("#light").toggle(); break;
  case "openDiv1": $("#light1").toggle(); break;
  //go on for how many you would need.
}

注意：我已将id设为唯一。

Answer 3

只需更新功能

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>

并且不要忘记添加＆＃34; closeDiv＆＃34;到具有此ID的元素类。它在JSFiddle上为我工作。的 http://jsfiddle.net/jvynbq1u/9/

如果要在更多元素上添加一个函数，请使用类，而不是id。一个特定的ID应仅适用于页面上的一个元素。

点击div 1，打开新内容。点击div 2打开div1的内容

3 个答案:

Demo jsfiddle