jQuery：制作相应的文本框会影响彼此的值

Situation:

2 text boxes, TextBoxA and TextBoxB. I enter text into TextBoxA and it sets the value of TextBoxB. Now, I need to be able to edit the value of TextBoxB, and have that set the value of TextBoxA. Simple enough, but I need this to work for several pairs of text boxes on a single page.

2个文本框,TextBoxA和TextBoxB。我在TextBoxA中输入文本,它设置TextBoxB的值。现在,我需要能够编辑TextBoxB的值,并设置TextBoxA的值。很简单,但我需要在单页上为几对文本框工作。

This is what I have so far:

这是我到目前为止:

$(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());
                }
            });
        });

    });

And:

<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" />

Everything works, except for making the second set of text boxes affect their corresponding counterparts. Can you see what I'm doing wrong? I'm pretty much a JavaScript/jQuery noob (spend most of my time in CSS/XHTML) So be gentle.

一切正常,除了使第二组文本框影响其对应的对应物。你能看出我做错了什么吗?我几乎是一个JavaScript / jQuery noob(我大部分时间都花在CSS / XHTML上)所以要温柔。

1 个解决方案

#1

I found the problem. It's very subtle. The selector for the second set needs to be changed from:

我发现了问题。这非常微妙。需要更改第二组的选择器:

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

to:

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