jQuery toggleClass 并从所有其他元素中删除类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5057191/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
toggleClass and remove class from all other elements
提问by TheNone
How can I toggleClass and remove class from all other elements? Consider a div that contains a tags: html:
如何从所有其他元素中切换类并删除类？考虑一个包含标签的 div：html：
<div class="size">
<a href="">blahblah</a>
<a href="">blahblah</a>
</div>
jQuery:
jQuery：
$(".size a").click(function(){
$(this).toggleClass('checked');
if($(".size a").hasClass('checked')){
$(this).removeClass('checked');
}
})
I want to add class "cheched" to element and remove the class "ckeched" from other elements that have class "checked" . My code remove all classes. How can I add specific class and remove other element's class with click? Thanks in advance
我想将类 "checked" 添加到元素并从具有类 "checked" 的其他元素中删除类 "ckeched" 。我的代码删除了所有类。如何通过单击添加特定类并删除其他元素的类？提前致谢
回答by Gabriele Petrioli
This will do it
这将做到
$(".size a").click(function(){
$('.size a.checked').not(this).removeClass('checked');
$(this).toggleClass('checked');
})
Update
更新
Alternatively you could do
或者你可以做
$(".size").on('click','a', function(){
$(this).toggleClass('checked').siblings().removeClass('checked');
})
回答by MD Ashik
Only You need to Use it. :)
只有你需要使用它。:)
<script>
$(document).ready(function () {
$('.demo_class').click(function () {
$(this).toggleClass('active').siblings().removeClass('active');
});
});
</script>
回答by Engkus Kusnadi
So late but its my answer
这么晚了，但这是我的答案
$(".size").click(function(){
$('.size').removeClass('checked') //Clear all checked class on .size
$(this).addClass('checked') //Add checked class to current clicked .size
})
$(".size").click(function(){
$('.size').removeClass('checked') //Clear all checked class on .size
$(this).addClass('checked') //Add checked class to current clicked .size
})
Its cleaner,powerfull and safe.
它更清洁、更强大、更安全。
回答by Gareth
I'm assuming that you have a class 'size' that contains a number of elements of which only one should be able to have the class 'checked' at any one time.
我假设您有一个“大小”类，其中包含许多元素，其中只有一个应该能够在任何时候“检查”该类。
$(".size a").click(function()
{
if($this).hasClass('checked')
{
$(".size a").removeClass('checked');
$(this).addClass('checked');
}
else
{
$(this).removeClass('checked');
}
}
回答by Kirandeep Singh
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>On click Change Css</title>
<link rel="stylesheet" href="css/style.css" >
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('.main').click(function(){
$(this).toggleClass('main1').siblings().removeClass('main1');;
});
});
</script>
</head>
<body>
<center>
<div class="main" id="main-box">
<h2>This is main Heading</h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</div>
<div class="main">
<h2>This is main Heading</h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</div>
<div class="main">
<h2>This is main Heading</h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</div>
</center>
</body>
Css
css
.main {
width:300px;
margin:30px;
margin:20px 25px;
text-align:center;
background-color:#CCC;
padding:20px;
display:inline-block;
}
.main:hover {
cursor:pointer;
}
.main1 {
width:300px;
margin:30px;
margin:20px 25px;
text-align:center;
background-color:#CCC;
padding:20px;
border:3px solid #036;
}
回答by Varsha Dhadge
$('.size a').on('click', function (e) {
e.preventDefault();
$(this).removeClass("checked");
$(this).slideToggle();
$(this).toggleClass('checked').removeClass('checked');
});
