jquery在单击的元素内显示具有更多类的所有div

问题描述

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

<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”，因为我点击了第一块。

解决方法

您需要根据当前事件范围隐藏元素。使用.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>

,

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

$(document).on("click touchend",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>