我正在尝试实现一个脚本来为特定元素设置不同的类名...
让我们假设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);
}
您可以使用可以使用的元素的数据属性
$(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);
}
希望这能为您解决.
更新:
你需要了解一件事.如果您想要两种不同的行为,则不需要2个不同的类来改变行为.一个就足够了,因为您可以根据类的开启或关闭来改变行为.
假设我希望我的元素以一种方式产生红色悬停事件.并希望它与CSS有另一种方式的蓝色悬停事件.然后这是要走的路:
$('#toggle').click(function(){
$('.normal').each(function(){
$(this).toggleClass('active');
});
});
在这里,我们使用一个按钮来切换所有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');
});
});
如您所见,我们添加了一个if语句.如果元素的.active类,我们转.off()了.click().如果没有活跃的课程,我们会转向.click() .on().在if语句下,我们总是切换.active类.所以这不必放在if语句中.
我希望这能为你解决所有问题,祝你好运!
旧答案:
最好在.toggleClass()这里使用.
在元素上使用第一个类作为默认属性,第二个类.active例如用于交互.
此外,使用.on('click', function(){})绑定将使您能够添加在切换元素后立即绑定的交互.