gpt4 book ai didi

javascript - 使用 jQuery 定位一组重复元素

转载 作者:行者123 更新时间:2023-12-02 14:09:33 25 4
gpt4 key购买 nike

我正在尝试为要显示/隐藏的元素创建单独的切换。所有类似的元素都对操作做出响应。我如何使其仅适用于一组特定的工作?目前所有类似的部分都在切换

这是我创建的 fiddle

https://jsfiddle.net/bqu0hznf/

<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary panel-custom">
<div class="panel-heading">
<div class="img-wrap">
<img src="http://placehold.it/50x50">
</div>
<div class="content-wrap">
<h4 class="panel-title"><a href="javascript:void(0);" class="acc-toggle">Basic panel example</a></h4>
<p>Lorem ipsum dolor blah blah blah....</p>
</div>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-md-12">
<div class="panel panel-primary panel-custom">
<div class="panel-heading">
<div class="img-wrap">
<img src="http://placehold.it/50x50">
</div>
<div class="content-wrap">
<h4 class="panel-title"><a href="javascript:void(0);" class="acc-toggle">Basic panel example</a></h4>
<p>Lorem ipsum dolor blah blah blah....</p>
</div>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-md-12">
<div class="panel panel-primary panel-custom">
<div class="panel-heading">
<div class="img-wrap">
<img src="http://placehold.it/50x50">
</div>
<div class="content-wrap">
<h4 class="panel-title"><a href="javascript:void(0);" class="acc-toggle">Basic panel example</a></h4>
<p>Lorem ipsum dolor blah blah blah....</p>
</div>
</div>
</div>
</div>
</div>

<script>
$('.acc-toggle').click(function() {
$( '.panel-custom p , .panel-custom .img-wrap img' ).fadeToggle('fast', 'linear');
});
</script>

最佳答案

使用$(this).closest('.panel-custom')寻找祖先.panel-custom然后找到p, .img-wrap img在里面就像下面这样。

$('.acc-toggle').click(function() {
$(this).closest('.panel-custom').find('p, .img-wrap img').fadeToggle('fast', 'linear');
});

<强> UPDATED FIDDLE

关于javascript - 使用 jQuery 定位一组重复元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39755247/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com