Я хочу изменить значение полей ввода для каждого элемента соответствия с определенным значением атрибута данных.
Таким образом, пользователь нажимает на значение, и появляются поля ввода, а затем сумма, введенная в поле ввода, также отражается в других полях с тем же продуктом.
т.е. изменить себестоимость на Родительский продукт, а также Изменить вариацию в реальном времени.
Код.
HTML
<table>
<tr>
<td>Product One</td>
<td>
<p class="cost" data-productid="107">12.00</p>
<input type="text" style="display:none" class="cost_input" data-productid="107"/>
</td>
</tr>
<tr>
<td>Variation of Product One</td>
<td>
<p class="cost">12.00</p>
<input type="text" style="display:none" class="cost_input 107" data-productid="107"/>
</td>
</tr>
<tr>
<td>Product Two</td>
<td>
<p class="cost" data-productid="108">12.00</p>
<input type="text" style="display:none" class="cost_input" data-productid="108"/>
</td>
</tr>
JS
$(".cost").click(function(event) {
var id = $(this).data('productid');
$(".cost").hide();
$('.cost_input').show();
$(this).next().select();
$('.cost_input [data-productid="'+id+'"]').bind('keyup keypress blur', function() {
$('.cost_input [data-productid="'+id+'"]').val($(this).val());
});
});
Fiddle - http://jsfiddle.net/ez4uD/15/
Довольно близко, просто избавьтесь от пространства в вашем селекторе между input
и [data
$('.cost_input[data-productid="'+id+'"]')