Javascript 有没有一种更短的方法来编写jquery切换代码?
类“指针”的CSS是游标:指针;对于“按下”类,是背景颜色更改;对于类“隐藏”为显示:无;对于类“添加”是显示:块 有2个按钮(按钮方法和按钮信息)。单击按钮方法时,按钮信息被禁用,装运信息隐藏,装运方法显示。单击按钮信息时,会发生相反的过程。有没有办法在两个不同的元素上使用toggleClass压缩此代码?更新:jQuery的4行。 当然还有更好的办法。从我对你的观点来看,这是最好的办法 在此处检查代码: 我所做的是把它们放在一个“按钮”变量中,由于一个按钮开始隐藏,这是在加载时必须做的,我只是以CSS为例,通过同时对这两个按钮进行切换,我总是在它们之间进行切换 HTML: CSS: 您可以使用toggleClass()交换类:Javascript 有没有一种更短的方法来编写jquery切换代码?,javascript,jquery,css,toggle,Javascript,Jquery,Css,Toggle,类“指针”的CSS是游标:指针;对于“按下”类,是背景颜色更改;对于类“隐藏”为显示:无;对于类“添加”是显示:块 有2个按钮(按钮方法和按钮信息)。单击按钮方法时,按钮信息被禁用,装运信息隐藏,装运方法显示。单击按钮信息时,会发生相反的过程。有没有办法在两个不同的元素上使用toggleClass压缩此代码?更新:jQuery的4行。 当然还有更好的办法。从我对你的观点来看,这是最好的办法 在此处检查代码: 我所做的是把它们放在一个“按钮”变量中,由于一个按钮开始隐藏,这是在加载时必须做的,我只
.red {background-color:red}
.green {background-color:green}
#shipping-info { display:block; }
#shipping-method { display:none; }
这是一本书
您的shipping info和shipping method类似乎相同。如果是这种情况,您可以在一个方法中将它们模块化,这样您就只在一个地方拥有代码。我认为这是一个错误,并据此编写了解决方案
您可以通过按钮切换进一步压缩它:
$('#button-method').on('click', function() {
$('#button-info').toggleClass('pressed pointer');
$(this).toggleClass('pressed pointer');
$('#shipping-info, #shipping-method').toggleClass('hide add');
});
$('#button-info').on('click', function() {
$(this).toggleClass('pressed pointer');
$('#button-method').toggleClass('pressed pointer');
$('#shipping-info, #shipping-method').toggleClass('hide add');
});
此时,处理程序变得相同,因此您可以将相同的处理程序绑定到两个按钮:
$('#button-method').on('click', function() {
$('#button-method, #button-info').toggleClass('pressed pointer');
$('#shipping-info, #shipping-method').toggleClass('hide add');
});
$('#button-info').on('click', function() {
$('#button-info, #button-method').toggleClass('pressed pointer');
$('#shipping-info, #shipping-method').toggleClass('hide add');
});
您可以像这样使用toggleClass:
$('#button-info, #button-method').on('click', function() {
if (!$(this).hasClass('pressed')) {
$('#button-method, #button-info').toggleClass('pressed pointer');
$('#shipping-info, #shipping-method').toggleClass('hide add');
}
});
如果你真的想压缩代码,你可以修改你的html和css,这样就不需要修改类了。好吧,我先从缓存这些元素开始。由于id是唯一的,您可以简单地获取id,无需像
#checkout#按钮方法那样进行查询
简短回答:是。长话短说,你可以更新你的HTML结构,允许稍微少一些的JS做同样的事情。问题是:花时间缩短JS一两行是否值得?Bic和Andre我喜欢你的代码示例。唯一的问题是按下的按钮仍然可以切换。我上面的代码使它在点击时,在按下另一个按钮之前,不会与按下的按钮进行交互。你会如何编织这一功能,也许是使用disabled?@matenji在我的答案中修改了最短的解决方案。您只需检查单击的按钮是否尚未按下该类。是的。这只是一个简单的例子,我将更新JSFIDLE!完成!请注意,您正在将jQuery对象保存为按钮
,然后从按钮
创建jQuery对象。在事件处理程序中,您不需要使用$()
包装按钮。
确实是开销,在这种情况下,这两种方式都可以。不过,感谢您的注意。此解决方案依赖于在页面初始加载时具有给定类的组之一。如果最初需要打开类,可以使用$.one处理初始按钮单击,并在该处理程序中绑定后续的单击处理程序。@matenji根据对原始帖子的评论修改了答案。注意,您可以使用disabled关闭按钮,这样它就不会触发事件,但样式可能无法在所有浏览器中工作。我知道某些版本的IE不允许您在禁用元素时设置其样式。
$('#button-method').on('click', function() {
$('#button-info').toggleClass('pressed pointer');
$(this).toggleClass('pressed pointer');
$('#shipping-info, #shipping-method').toggleClass('hide add');
});
$('#button-info').on('click', function() {
$(this).toggleClass('pressed pointer');
$('#button-method').toggleClass('pressed pointer');
$('#shipping-info, #shipping-method').toggleClass('hide add');
});
$('#button-method').on('click', function() {
$('#button-method, #button-info').toggleClass('pressed pointer');
$('#shipping-info, #shipping-method').toggleClass('hide add');
});
$('#button-info').on('click', function() {
$('#button-info, #button-method').toggleClass('pressed pointer');
$('#shipping-info, #shipping-method').toggleClass('hide add');
});
$('#button-info, #button-method').on('click', function() {
if (!$(this).hasClass('pressed')) {
$('#button-method, #button-info').toggleClass('pressed pointer');
$('#shipping-info, #shipping-method').toggleClass('hide add');
}
});
function toggle(condition)
{
$('#button-info').toggleClass('pressed', !condition).toggleClass('pointer', condition);
$('#button-method').toggleClass('pressed', condition).toggleClass('pointer', !condition);
$('#shipping-info').toggleClass('hide', condition);
$('#shipping-method').toggleClass('add', condition);
}
$('#button-method').on('click', function() {
toggle(true);
});
$('#button-info').on('click', function() {
toggle(false);
});