jQuery: Die entsprechenden Textfelder wirken sich auf die Werte des anderen aus

Question

Sachverhalt:

2 Textfelder, TextBoxA und TextBoxB. Ich gebe Text in TextBoxA ein und legt den Wert von TextBoxB fest. Jetzt muss ich in der Lage sein, den Wert von TextBoxB zu bearbeiten und den Wert von TextBoxA festzulegen. Einfach genug, aber ich brauche das für mehrere Paare von Textfeldern auf einer einzigen Seite. Diese

ist das, was ich bisher:

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

    }); 

Und:

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

Alles funktioniert, außer für den zweiten Satz von Textfeldern, die ihre entsprechenden Pendants beeinflussen. Kannst du sehen, was ich falsch mache? Ich bin so ziemlich ein JavaScript/jQuery-Noob (verbringe die meiste Zeit in CSS/XHTML) Also sei sanft.

Answer 1

Ich habe das Problem gefunden. Es ist sehr subtil. Der Wähler für den zweiten Satz muss aus geändert werden:

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

zu:

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