Question

这是我的代码，第一个选择器用于当我点击id为＃的div而内部选择器是一个内部div，其id为“popup-＃”我的问题是怎么做我只显示当前的内部div，因为目前当我点击时，页面上的所有内部div都显示并隐藏。旁注这些div是通过php生成的，因此它们的值从1开始增加。还有一个问题，什么是更好的方法来编写内部div选择器来显示而不是使用.filter进行显示和隐藏？我找不到一种方法来使用“this”作为内部选择器

离。当我点击一个ID为“1”的外部div时，“popup-1”的内部div应显示而不是所有其他div。

$('div').filter(function(){
    return this.id.match(/^\d+$/);
}).click(function() {
    if($('div').filter(function () {
            return this.id.match(/popup-\d+$/);
        }).css('display') == 'none'
    ) {
        $('div').filter(function () {
            return this.id.match(/popup-\d+$/);
        }).show();  
    } else {
        $('div').filter(function () {
            return this.id.match(/popup-\d+$/);
        }).hide();
    };  
});

HTML

<div class="test-style" id="1">
    <div class="inner-test" id="popup-1" style="display: none">
    </div>
</div>

<div class="test-style" id="2">
    <div class="inner-test" id="popup-2" style="display: none">
    </div>
</div>

Answer 1

使用该类而不是对ID进行过滤。然后，您需要获取所单击元素的ID，并将其与popup-前缀连接，以获取要显示的元素的ID。

$(".test-style").click(function() {
  var id = this.id;
  $(".inner-test").hide();
  $("#popup-" + id).show();
});

.test-style {
  height: 100px;
  width: 100px;
  background-color: red;
  border: solid 1px black;
}
.inner-test {
  height: 50px;
  width: 50px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-style" id="1">
  <div class="inner-test" id="popup-1" style="display: none">
  </div>
</div>

<div class="test-style" id="2">
  <div class="inner-test" id="popup-2" style="display: none">
  </div>
</div>

但是，由于您要显示的DIV始终位于您单击的DIV内部，因此您甚至不需要ID。只是做：

$(".test-style").click(function() {
  $(".inner-test").hide();
  $(this).find(".inner-test").show();
});

Answer 2

您的过滤器

this.id.match(/popup-\d+$/)

由于常规'div'选择器，

匹配文档中的所有内部元素。

而不是

if($('div').filter(function () {

试

if($(this).filter(function () {

仅过滤点击元素的子项。

如何使用嵌套的JQuery选择器显示所有内部DIV？

2 个答案: