限制选择数量并将所选数据插入数组答案

【问题标题】：Restrict number of selections and insert selected data into an array限制选择数量并将所选数据插入数组
【发布时间】：2012-04-16 10:23:22
【问题描述】：

我有 15 个列表项。我只允许用户从中挑选 5 个。然后我把这个信息放入数组中，提交给服务器。

<li><a href="#" id="item1" class="select">Item One</a></li> ... etc.

然后我使用此代码来切换所选项目的类别

function SelectPrizes (){
$('a.select').click(function() {
    $(this).toggleClass("selected");
    $(this).text($(this).text() == 'Choose prize' ? 'Selected' : 'Choose prize');
    return false;
});
}

我的问题是，如何只允许 5 次选择，并仅按 ID 将选定项添加到数组中。

我知道我可以通过 hasClass('selected') 进行过滤，但我无法找出正确的语法。

【问题讨论】：

标签： jquery arrays filter restrict

【解决方案1】：

回答你的三个问题：

允许 5 个选择：确保 $('a.select.selected') 的长度不超过 5 个限制：

if ( $('a.select.selected').length < 5 ) {
    // Does not exceed, so we can add...
}

只将选定的项目添加到数组中：只添加那些具有“选定”类的项目：

$('a.select.selected').each(function(){
    // Add to array
});

失望先生建议的 hasClass('selected') 的语法：

if ( $(this).hasClass('selected') ) {

}

如果您允许用户选择超过 5 个项目，然后只选择其中任意 5 个，则失望先生的解决方案将起作用。

另外，还有一个改进您的 html 的建议。我假设 li 项目有一个 ul 父母。将类 'select' 设置为此 ul 父级并使用选择器：$('ul.select li a').click()。

我已经为你把这一切放在了一个 jsfiddle 中：http://jsfiddle.net/5b8aj/6/

【讨论】：

太棒了。非常感谢，我已经重写了我的代码，我的代码有点糟糕。

【解决方案2】：

您可以使用slice(start, end) 从选择中获取特定数量的结果，从指定的索引开始。

var results = $("a.select").slice(0, 5);

您的问题的第二部分可以通过条件检查来回答：

if ($(this).hasClass("selected")) {

}

【讨论】：

【解决方案3】：

检查以下值以判断是否选择了 5 个元素 -

$('a.select[class*="selected"]').length==5

【讨论】：