假设我有一个用于某个class的jQuery点击处理程序,其中多个按钮/主体/部分都有这个类。我想知道最后单击的是哪个按钮,取消单击之前单击的任何按钮,并使其对客户来说也是显而易见的。
什么是更好的方法,跟踪上一次单击按钮的变量,这样当另一个按钮被单击时,我可以将其更改为“unclicked”,或者只是针对整个类?
demo
我问这个问题的部分原因是,如果我以整个类为目标,并从所有这些对象中删除一个样式或类,它需要的代码更少,但是,我修改了很多元素。但是如果我保留一个变量,我只会修改两个元素,一个是已经被点击的元素,一个是刚刚被点击的元素。
然而,保留一个变量意味着必须添加条件逻辑,如果我只是说“从所有的‘按钮’中删除‘点击的’类‘”,那么条件逻辑就不是必需的。那么,就性能而言,有没有一种方法更好,或者它们是相对相等的?
发布于 2015-05-07 04:11:50
如果可以的话,最好避免使用全局或局部作用域的变量,保持状态。
对于这种类型的场景,我将以类为目标(快速选择器)。从清除类中排除当前项,并切换目标。这也允许打开/关闭。
$(function() {
$('.button').on('click', function() {
$('.button').not(this).removeClass('clicked');
$(this).toggleClass('clicked');
});
});JSFiddle: http://jsfiddle.net/ou1wy5vt/2/
你不会关心任何速度的差异,除非你每秒点击50,000次,但如果你想要一个快速的选择器,而不缓存它,这是有点快,因为它会产生更少的结果:
$('.clicked').not(this).removeClass('clicked');或者,缓存jQuery选择器:
$(function() {
var $buttons = $('.button').on('click', function() {
$buttons.not(this).removeClass('clicked');
$(this).toggleClass('clicked');
});
});再说一次,你想要最简单、最容易阅读/维护的选项,而不是试图变得太聪明/太快并失去可维护性。
发布于 2015-05-07 04:15:38
如果您以整个类为目标,那么该类中的所有元素都将被迭代,并且jQuery将尝试删除每个元素的类,即使它们没有该类。
因此,跟踪上一次单击的按钮会更快,因为您只删除了所需元素的类。
如果存储jQuery元素包装器,速度会更快:
var $clicked = $();
$('.button').on('click', function() {
$clicked.removeClass('clicked');
$clicked = $(this).addClass('clicked');
});https://stackoverflow.com/questions/30086528
复制相似问题