我jQuery的功能我不認爲是正確的

我有一個下拉菜單，在我的HTML下方的一些按鈕：我jQuery的功能我不認爲是正確的

<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.'); 
     }  
    } 
}

來源

2011-12-02 BruceyBandit

這就像你正在使用jQuery，但不是在同一時間。 –

這段代碼很糟糕。每當你製作$（「＃」+ id）時，你都會做DOM遍歷，這是很昂貴的。將它存儲在一個變量中，請像高效的孩子一樣高效。 –

再看看你是如何獲得'numberDrop'。我的猜測是它是'未定義的'。作爲Dbugger指出的 – hafichuk

由於Google will tell you，您使用jQuery .val() method來確定選擇元素（或輸入或文本域）的當前值。然後，您可以使用一元加運算符來獲取該字符串並將其更改爲一個數字。（您可能希望更新第一個選項元素的值爲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

我不知道你期望如何工作。如果用戶想要改變他們的選擇，他們將不得不取消選擇一個或多個當前選擇的按鈕。

來源

2011-12-02 03:23:28 nnnnnn

如果您刪除了onclicks，請確保將您的jQuery代碼放在'document中。準備好了（函數{...}）;'並移除函數' – talnicolas

是的，抱歉，忘記在我的答案中明確提及文檔。上面顯示的代碼使用文檔就緒語法的快捷方式，旨在完全替代現有的'getButtons（）'函數。 – nnnnnn

@Malcolm皮卡這裏有一些基本的想法[jsfiddle]（http://jsfiddle.net/P8p3g/1/） – punit

我jQuery的功能我不認爲是正確的

回答

相關問題