jQuery: создание соответствующих текстовых полей влияет на значения друг друга

Question

Положение:

2 текстовых поля, TextBoxA и TextBoxB. Я ввожу текст в TextBoxA, и он устанавливает значение TextBoxB. Теперь мне нужно иметь возможность редактировать значение TextBoxB, и это установить значение TextBoxA. Достаточно просто, но мне нужно, чтобы это работало для нескольких пар текстовых полей на одной странице.

Это то, что я имею до сих пор:

$(function() {
        $(':text').css("border", "1px solid #666"); // Remove for actual app

        // Sets value of corresponding textbox by ID
        $(':text').blur(function() {
            $('#inputval_' + ($(this).attr("id"))).val($(this).val());
        });

        //Styles all inputs set to read only
        $('input[readonly=readonly]').css("border", "none");

        $('input[readonly=readonly]').click(function() {// on click allows edit of readonly inputs
            if ($(this).attr("readonly") == true) {
                $(this).removeAttr("readonly");
                $(this).css("border", "1px solid #666");
            }
            $(this).blur(function() {//on blur sets readonly back to true
                if ($(this).attr("readonly") == false) {
                    $(this).attr("readonly", "readonly");
                    $(this).css("border", "none");
                    $('#' + ($(this).attr(("id").remove("inputval_")))).val($(this).val());
                }
            });
        });

    });

И

<input type="text" id="text1" name="userinput" /><br /><br />
<input type="text" id="text2" name="userinput" /><br /><br />
<input type="text" readonly="readonly" id="inputval_text1" />
<input type="text" readonly="readonly" id="inputval_text2" />

Все работает, за исключением того, что второй набор текстовых полей влияет на их соответствующие аналоги. Вы видите, что я делаю не так? Я в значительной степени Noob JavaScript / jQuery (большую часть времени я провожу в CSS / XHTML) Так что будьте осторожны.

Answer 1

Я нашел проблему. Это очень тонко. Селектор для второго набора необходимо изменить с:

$('#' + ($(this).attr(("id").remove("inputval_")))).val($(this).val());

до:

$('#' + ($(this).attr("id")).replace("inputval_","")).val($(this).val());