jQuery 点击添加 Class
jQuery On Click Add Class
所以我想弄清楚为什么这不起作用:
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');
});
基本上我想单击按钮,然后将 class 的 show 添加到所有带有 class 的 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 代码,但这不是工作所必需的。
您可以使用 toggleClass()
方法。考虑到您获得的 css 规则。在两者之间切换 类
$('.all-btn').on('click', function () {
$('.all').toggleClass('show item');
});
或者:
$('.all-btn').on('click', function () {
$('.all').toggle();
});
所以我想弄清楚为什么这不起作用:
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');
});
基本上我想单击按钮,然后将 class 的 show 添加到所有带有 class 的 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 代码,但这不是工作所必需的。
您可以使用 toggleClass()
方法。考虑到您获得的 css 规则。在两者之间切换 类
$('.all-btn').on('click', function () {
$('.all').toggleClass('show item');
});
或者:
$('.all-btn').on('click', function () {
$('.all').toggle();
});