Question

我的HTML下方有一个下拉菜单和一些按钮：

<p>
    <select name="numberDrop" id="numberDropId" onClick="getButtons()">
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</p>
<p>
    <input class="answerBtns" id="answerA" type="button" value="A" onclick="getButtons(this.id);" /> 
    <input class="answerBtns" id="answerB" type="button" value="B" onclick="getButtons(this.id);"/> 
    <input class="answerBtns" id="answerC" type="button" value="C" onclick="getButtons(this.id);"/> 
    <input class="answerBtns" id="answerD" type="button" value="D" onclick="getButtons(this.id);"/> 
    <input class="answerBtns" id="answerE" type="button" value="E" onclick="getButtons(this.id);"/>
</p>

这就是我想要发生的事情：让我们说用户在下拉菜单中选择3，然后如果用户点击一个按钮，它会突出显示一个颜色的按钮（说绿色），但用户只能选择了三个按钮。

如果单击其他按钮，则不会选择该按钮。只有当用户取消选择所选按钮然后选择他想要的按钮时，才能选择附加按钮。这意味着最多只能选择3个按钮。

也不能选择少于3个按钮，如果用户在下拉菜单中选择了3，则必须有3个按钮。

我尝试过使用jQuery addClass和removeClass，但我不知道如何从下拉列表中检索值，我无法判断是否选择了按钮。有人可以告诉我这个jQuery方法是否正确，我需要在我的javascript或我的CSS中放置什么才能使选中的按钮绿色和未选中的按钮变回灰色？

如果我只想选择3个按钮，则下面是我的功能：

function getButtons(id)
{
    if ($('#' + id).hasClass('answerBtnsSelected'))
        $('#' + id).removeClass('answerBtnsSelected');
    else
    {
        if ($('.answerBtnsSelected').length != 3 )
        {
            $('#' + id).addClass('answerBtnsSelected');
        }
        else
        {
             alert('Only three buttons can be selected.');
        }       
    }
}

Answer 1

作为Google will tell you，您使用jQuery .val() method来确定select元素（或输入或textarea）的当前值。然后，您可以使用一元加运算符来获取该字符串并将其更改为数字。（您可能希望更新第一个选项元素以使其值为0，但以下代码应该按原样处理它。）

因此，删除所有内联onclicks并使用jQuery设置处理程序，添加我刚刚告诉你的关于.val()的内容，你会得到类似这样的内容：

$(function() {
    $(".answerBtns").click(function() {
        var btn = $(this),
            selectionLimit = +$("numberDropId").val() || 0;

        if (btn.hasClass('answerBtnsSelected'))
            btn.removeClass('answerBtnsSelected');
        else if ($('.answerBtnsSelected').length < selectionLimit)
            btn.addClass('answerBtnsSelected');
        else
            alert('Only ' + selectionLimit + ' buttons can be selected.');
    });
});

我实际上没有测试过上面的内容，但它应该能让你远远超过你目前所处的位置。

关于你问题中的以下几点：

也不能选择少于3个按钮，如果用户在下拉菜单中选择了3，则必须有3个按钮

我不知道你希望如何工作。如果用户想要更改他们的选择，他们将不得不取消选择一个或多个当前选择的按钮。

我的jquery函数我不认为是正确的

1 个答案: