Изменить параметр при нажатии кнопки

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> 

 

А вот моя неудачная попытка на userscript:

$(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() внутри $(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); 
    }); 
}); 

Вы также не должны указывать повторяющиеся идентификаторы для элементов. Я изменил его, чтобы использовать атрибут data. И хотя это нормально, чтобы дублировать классы, использование их только для хранения данных об элементе не совсем подходит, поэтому я также изменил их на атрибуты данных.