gpt4 book ai didi

jQuery 点击添加类

转载 作者:行者123 更新时间:2023-11-28 07:29:48 25 4
gpt4 key购买 nike

所以我想弄清楚为什么这不起作用:

https://jsfiddle.net/bv6ort3g/

HTML:

<div class="all-btn">All Button</div>

<div class="item all"> item 1 </div>
<div class="item all"> item 2 </div>
<div class="item all"> item 3 </div>
<div class="item all"> item 4 </div>
<div class="item all"> item 5 </div>

CSS:

.all-btn {
cursor: pointer;
padding: 5px;
border: 1px solid #000;
display: inline-block;
margin-bottom: 15px;
}

.item {
display: none;
}
.show {
display: block;
}

jQuery:

$('.all-btn').on('click', function () {
$('.all').addClass('show');
});

基本上,我想单击按钮,然后将 show 类添加到所有类为 all

的 div 标签

有人知道我哪里错了吗?

谢谢

最佳答案

基本上我已经这样做了...

$(function(){
$(".item").hide();
$(".all-btn").on("click", function(){
$(".item").show();
});
});

或者您可以使用它在显示和隐藏类之间切换...

$(function(){
$(".item").hide();
$(".all-btn").on("click", function(){
$(".item").toggle();
});
});

我让你的 HTML 保持不变......

<div class="all-btn">Show Button</div>

<div class="item all">Item 1</div>
<div class="item all">Item 2 </div>
<div class="item all">Item 3 </div>
<div class="item all">Item 4 </div>
<div class="item all">Item 5 </div>

但是我已经删除了你的 .item.show 并保留了你的 .all-button CSS 代码,但这不是必需的为了这个工作。

演示:https://jsfiddle.net/bv6ort3g/1/

发烧友演示:https://jsfiddle.net/bv6ort3g/2/

关于jQuery 点击添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31593855/

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