jQuery中的智能切换类
我正在尝试实现一个脚本来在特定元素…上设置不同的类名。
让我们假设dom如下所示：
<body class='pre-existing-class-name'>如果我
smartToogle('body', 'new-class');
// the dom should look like this
// <body class='pre-existing-class-name new-class'>
smartToogle('body', 'new-class-2');
// the dom should look like this
// <body class='pre-existing-class-name new-class-2'>我执行了以下代码，但它不起作用：
var smartToogle = function (element, newClassName) {
var oldClassName;
var $element = $(element);
$element.addClass(newClassName);
if (oldClassName !== newClassName) {
$element.removeClass(oldClassName);
}
oldClassName = newClassName;
};要求：
1)我使用的是查询
2)我只想传递一个类名，新的一个。
解决方案：
下面的代码可以工作，但我不喜欢它，因为它使用全局变量。
有什么线索可以解决吗？
function myToggle(newClassName) {
if (window.oldClassName) {
$('body').toggleClass(window.oldClassName);
}
window.oldClassName = newClassName;
$('body').toggleClass(newClassName);
}回答 11
Stack Overflow用户
发布于 2012-10-18 10:15:44
可以对元素使用数据属性，可以使用
$(element).data(attrib_name)在您的方法中只需要做一点小小的更改。
function myToggle(newClassName) {
if (window.oldClassName) {
$('body').toggleClass(window.oldClassName);
}
window.oldClassName = newClassName;
$('body').toggleClass(newClassName);
}可以用
function myToggle(element, newClassName) {
if ($(element).data('oldClassName')) {
$(element).toggleClass($(element).data('oldClassName'));
}
$(element).data('oldClassName', newClassName)
$(element).toggleClass(newClassName);
}希望这能帮你解决。
Stack Overflow用户
发布于 2012-10-16 08:15:48
更新：
有一件事你需要明白。如果您想要两个不同的行为，则不需要两个不同的类来更改行为。一个就够了，因为您可以根据具体情况更改行为--类是 on 或on。
假设我希望我的元素有一个红色悬停事件。并希望它有一个蓝色悬停事件与CSS相反的方式。那么，这就是要走的路：
$('#toggle').click(function(){
$('.normal').each(function(){
$(this).toggleClass('active');
});
});JSFiddle演示
这里我们使用一个按钮来切换所有的div并改变它们的CSS行为，现在看起来很容易吧？
但是，如果您需要切换Javascript/jQuery，那么也不行。在这种情况下，您需要使用3种其他方法来管理它：.on()、.off()和.hasClass()。
$('#toggle').click(function(){
$('.normal').each(function(){
if($(this).hasClass('active')){
$(this).off('click');
} else {
$(this).on('click', function(){
alert('You are clicking on an active div.');
});
}
$(this).toggleClass('active');
});
});JSFiddle演示2
如您所见，我们添加了一个if语句。如果元素具有.active类，则将.off()转换为.click()。如果没有活动类，我们将调用.click() .on()。在if语句下，我们总是切换.active类。因此，这不一定要放在if语句中。
我希望这能为你清除一切，祝你好运！
旧答案：
最好在这里使用.toggleClass()。
对于默认属性在元素上使用第一个类，对交互使用第二个类似于.active的类。
此外，使用.on('click', function(){})绑定将使您能够添加交互，这些交互将在元素切换后立即绑定。
Stack Overflow用户
发布于 2012-10-19 22:55:04
这里有一个小提琴：http://jsfiddle.net/NCwmF/2/
我的小jQuery插件。移除当前的智能类(如果有的话)并添加新的智能类。如果调用时没有参数className，则只删除当前的智能类。
$.fn.smartToggle = function (className) {
var dataId = 'smartToggle';
return this.each(function () {
var $el = $(this);
$el
.removeClass($el.data(dataId) || '')
.addClass(className)
.data(dataId, className);
});
};与其他所有jQuery方法一样，使用它：
$('body').smartToggle('myClass');https://stackoverflow.com/questions/12910216
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号