Javascript 防止选择多个X元素

我使用jQuery允许用户选择3时间块，而不是更多

一旦他们选择了3个区块，我想阻止他们选择更多

不过，我的运气不太好

我的当前代码可在此处找到：

我尝试增加selected_num的值并添加一个返回值false，但这并不能阻止选择

我还想尝试反向操作，用户可以单击所选项目，并且计数也会改变

jQuery代码：

var selected_num = 0;

$('.time-block').click(function()
{
var id = $(this).data('id');
var chosen_time = $(this).data('time');

$(this).addClass('-chosen');

$('.time-selected-block').eq(selected_num).html(chosen_time);

if(selected_num == "3")
{
    return false;
}
else
{
    selected_num++;
}

console.log(selected_num);
})

---

谢谢

您可以尝试以下方法：

$('.time-block').click(function () {
    if ($('.-chosen').length < 3 || $(this).hasClass('-chosen')) {
        $(this).toggleClass('-chosen')
    }
})

$（'.time block'）。单击（函数（）{
if（$（'.-selected'）.length<3 | |$（this）.hasClass（'-selected'））{
$（this.toggleClass（'-selected'））
}
})

---

以下是。

您可以尝试以下方法：

$('.time-block').click(function () {
    if ($('.-chosen').length < 3 || $(this).hasClass('-chosen')) {
        $(this).toggleClass('-chosen')
    }
})

$（'.time block'）。单击（函数（）{
if（$（'.-selected'）.length<3 | |$（this）.hasClass（'-selected'））{
$（this.toggleClass（'-selected'））
}
})

---

以下是。

除了提供给您的解决方案外，以下是一些说明：

你的问题是：

1） 此声明

$(this).addClass('-chosen');

出现在您的评估之前。 因此，在条件有机会被评估之前添加类

2） 您的状况正常，但存在问题：

selected_num == "3"

首先，如果选择了2个以上，则要防止添加： 如果有可能选择4，则允许添加第5个，以此类推

第二，您正在比较整数和字符串所选的_num。 这个字符串由引擎转换成整数，因此这不是什么大问题，但是如果不是有意的，也不是有用的，就不应该进行这种类型的转换

---

3） 正如您在Yevgen Gorbunkov的解决方案中所看到的，您应该使用“toggleClass”在较短的代码段中添加或删除该类。

除了提供给您的解决方案之外，下面是一些解释：

你的问题是：

1） 此声明

$(this).addClass('-chosen');

出现在您的评估之前。 因此，在条件有机会被评估之前添加类

2） 您的状况正常，但存在问题：

selected_num == "3"

首先，如果选择了2个以上，则要防止添加： 如果有可能选择4，则允许添加第5个，以此类推

第二，您正在比较整数和字符串所选的_num。 这个字符串由引擎转换成整数，因此这不是什么大问题，但是如果不是有意的，也不是有用的，就不应该进行这种类型的转换

3） 正如您在Yevgen Gorbunkov的解决方案中所看到的，您应该使用“toggleClass”在较短的代码段中添加或删除该类