jquery 显示所有点击元素内还有 class 的 div

Question

我喜欢将所有“c1”隐藏在点击的 class “brick”中：

<div class="brick">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c1"></div>
</div>

<div class="brick">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c1"></div>
</div>


 $(document).on("click touchend", ".brick", function(event) {
    $(".c1").hide();
});

但是如果我点击砖块，所有“c1”都将被隐藏。但是我喜欢只隐藏第一块砖中的“c1”，因为我点击了第一块。

Answer 1

您需要根据当前事件范围隐藏元素。使用 .find():

$(document).on("click touchend", ".brick", function(event) {
    $(this).find(".c1").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="brick">
    <div class="c1">brick 1 - c1</div>
    <div class="c2">brick 1 - c2</div>
    <div class="c3">brick 1 - c3</div>
    <div class="c1">brick 1 - c1</div>
</div>

<hr>

<div class="brick">
    <div class="c1">brick 2 - c1</div>
    <div class="c2">brick 2 - c2</div>
    <div class="c3">brick 2 - c3</div>
    <div class="c1">brick 2 - c1</div>
</div>

Answer 2

你必须使用 $(this) 来捕获上下文您有很多解决方案，例如，一种是使用 children()

$(document).on("click touchend", ".brick", function(event) {
    $(this).children(".c1").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="brick">
<div class="c1">brick 1 - c1</div>
<div class="c2">brick 1 - c2</div>
<div class="c3">brick 1 - c3</div>
<div class="c1">brick 1 - c1</div>
</div>

<hr>



<div class="brick">
<div class="c1">brick 2 - c1</div>
<div class="c2">brick 2 - c2</div>
<div class="c3">brick 2 - c3</div>
<div class="c1">brick 2 - c1</div>
</div>

jquery 显示所有点击元素内还有 class 的 div

jquery show all divs with class more inside clicked element

javascript

jquery

show

hide