Question

假设我有一个按钮列表。每个按钮属于一个“.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?
    });
}

这比听起来更棘手：意识到每个按钮都不会知道它是最后一个，直到其类中的另一个任意按钮被勾选为止。

请帮忙吗？

Answer 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");
}

如何使用jQuery确定给定类的剩余元素？

1 个答案: