假设我有一个按钮列表。每个按钮属于一个“.button”类。每个按钮在视觉上以选定状态显示。每个按钮还有一个样式类,将其与给定的功能相关联,即; “.widget-1”,“。widget-2”,因此<div class="button widget-1">
等等。单击按钮时,我会执行:$(this).addClass("selected")
请注意,我有任意数量的按钮,我不知道在任何给定时间我将拥有多少按钮,因为列表是数据驱动的,并且在运行时动态调整大小和样式。
但是,当只剩下一个按钮保持未勾选时,有一种情况必须满足条件,即;一个没有添加“.selected”类的按钮。
出于说明目的,请考虑以下代码:
for (var n = 0; n < Math.round(Math.random() * 10); n++ ) {
$('<button />').attr({class: 'button widget-' + n})
.appendTo('body')
.click(function(){
$(this).addClass('selected');
// Am I the last .button without .selected class?
});
}
这比听起来更棘手:意识到每个按钮都不会知道它是最后一个,直到其类中的另一个任意按钮被勾选为止。
请帮忙吗?
答案 0 :(得分:1)
用这段代码替换你的点击处理程序主体,这将检查是否有任何其他按钮被选中。
$(this).addClass('selected');
if( $('button.selected').length == 0) {
alert("This is the last button");
}
如果在将所选类添加到单击按钮后,“已选择”类的按钮集合的大小为零,则表示它是最后一个。
现在,你的问题有点模糊,因为不清楚你是否打算只计算带有“按钮”类的按钮(“我是最后一个.button而不是.selected类”)或者你是否打算计算所有按钮元素。如果您只想使用“按钮”类来计算按钮,那么您可以使用:
$(this).addClass('selected');
if( $('button.button.selected').length == 0) {
alert("This is the last button");
}