單擊按鈕更改選項

Question

我正在嘗試編寫一個用戶腳本，該腳本將在下拉菜單下方添加按鈕，並根據單擊的按鈕更改值。 這里有3個單獨的下拉菜單：

<fieldset>
<div style="float: left;">
<div><label>Number of big seeds</label> <select class="form-control" name="big"> <optgroup label="big"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></optgroup> </select></div>

<div><label>Number of small seeds</label> <select class="form-control" name="small"><optgroup label="small"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></optgroup> </select></div>

<div><label>Number of tiny seeds</label> <select class="form-control" name="tiny"><optgroup label="tiny"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option> </optgroup> </select></div>

這是我對用戶腳本的嘗試失敗：

$(document).ready(function() {

    //Variables for buttons
    var $0 = $('<button type="button" class="0" id="0">0</button>');
    var $1 = $('<button type="button" class="0" id="1">1</button>');
    var $2 = $('<button type="button" class="0" id="2">2</button>');
    var $3 = $('<button type="button" class="0" id="3">3</button>');
    var $4 = $('<button type="button" class="0" id="4">4</button>');
    var $5 = $('<button type="button" class="0" id="5">5</button>');

    var $6 = $('<button type="button" class="1" id="0">0</button>');
    var $7 = $('<button type="button" class="1" id="1">1</button>');
    var $8 = $('<button type="button" class="1" id="2">2</button>');
    var $9 = $('<button type="button" class="1" id="3">3</button>');
    var $10 = $('<button type="button" class="1" id="4">4</button>');
    var $11 = $('<button type="button" class="1" id="5">5</button>');

    var $12 = $('<button type="button" class="2" id="0">0</button>');
    var $13 = $('<button type="button" class="2" id="1">1</button>');
    var $14 = $('<button type="button" class="2" id="2">2</button>');
    var $15 = $('<button type="button" class="2" id="3">3</button>');
    var $16 = $('<button type="button" class="2" id="4">4</button>');
    var $17 = $('<button type="button" class="2" id="5">5</button>');


    //Add buttons
    $('.form-control').eq(0).after($0,$1,$2,$3,$4,$5);
    $('.form-control').eq(1).after($6,$7,$8,$9,$10,$11);
    $('.form-control').eq(2).after($12,$13,$14,$15,$16,$17);

});

//Click event
$(":button").click(function(){
     var thisClass = parseInt($(this).attr('class'));
     var thisID = parseInt($(this).attr('id'));

     $('.form-control').eq(thisClass).val(thisID);
});

有人可以告訴我我要去哪里了嗎？

Answer 1

您將立即綁定click事件，但是在文檔准備好之前不添加按鈕。 追加按鈕后，將.click()調用放入$(document).ready()內。

$(document).ready(function() {

    //Variables for buttons
    var $0 = $('<button type="button" data-index="0" data-value="0">0</button>');
    var $1 = $('<button type="button" data-index="0" data-value="1">1</button>');
    var $2 = $('<button type="button" data-index="0" data-value="2">2</button>');
    var $3 = $('<button type="button" data-index="0" data-value="3">3</button>');
    var $4 = $('<button type="button" data-index="0" data-value="4">4</button>');
    var $5 = $('<button type="button" data-index="0" data-value="5">5</button>');

    var $6 = $('<button type="button" data-index="1" data-value="0">0</button>');
    var $7 = $('<button type="button" data-index="1" data-value="1">1</button>');
    var $8 = $('<button type="button" data-index="1" data-value="2">2</button>');
    var $9 = $('<button type="button" data-index="1" data-value="3">3</button>');
    var $10 = $('<button type="button" data-index="1" data-value="4">4</button>');
    var $11 = $('<button type="button" data-index="1" data-value="5">5</button>');

    var $12 = $('<button type="button" data-index="2" data-value="0">0</button>');
    var $13 = $('<button type="button" data-index="2" data-value="1">1</button>');
    var $14 = $('<button type="button" data-index="2" data-value="2">2</button>');
    var $15 = $('<button type="button" data-index="2" data-value="3">3</button>');
    var $16 = $('<button type="button" data-index="2" data-value="4">4</button>');
    var $17 = $('<button type="button" data-index="2" data-value="5">5</button>');


    //Add buttons
    $('.form-control').eq(0).after($0,$1,$2,$3,$4,$5);
    $('.form-control').eq(1).after($6,$7,$8,$9,$10,$11);
    $('.form-control').eq(2).after($12,$13,$14,$15,$16,$17);

    //Click event
    $(":button").click(function(){
         var thisIndex = $(this).data('index');
         var thisValue = $(this).data("value");

         $('.form-control').eq(thisIndex).val(thisValue);
    });
});

您也不應為元素提供重復的ID。 我將其更改為使用數據屬性。 雖然可以復制類，但僅使用它們來保存有關元素的數據並不是真正合適的，因此我也將它們更改為數據屬性。