Question

这是我的代码，用于将textbox1的文本反映到另一个在keyup事件上调用textbox1a的文本框中。我用相同的背景将它们分开。将每个结果显示为特定输入。但是当我在第一个文本框中写入时，它是重复文本给其他人。我怎么能把他们分开？这是我的代码：

＆＃13;

$("input[type=text]").keyup(function(){
   var className = $(this).attr('class').replace('valueEnter','').trim();
   $("."+className).val($(this).val());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first">
TextBox 1a : <input type="text" class="textBox1 valueEnter" style="background:#ccc;"/><br/>
TextBox 1b : <input type="text" class="textBox1 valueEnter" style="background:pink;"/> <br/> 
TextBox 2 : <input type="text" class="textBox2 valueEnter"/>
</div>
<br/>
<div class="second">
Show text 1a : <input type="text" class="textBox1" style="background:#ccc;"/> <br/> 
Show text 1b : <input type="text" class="textBox1" style="background:pink;"/> <br/>
show text2 : <input type="text" class="textBox2"/>
</div>

＆＃13;

Answer 1

您可以在此使用.index()查找.first内的输入索引，然后使用.eq()更改.second内该索引的值输入

＆＃13;

$("input[type=text]").keyup(function(){
   var index = $('.first .textBox1').index(this);
   var className = $(this).attr('class').replace('valueEnter','').trim();
   $(".second ."+className).eq(index).val($(this).val());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first">
TextBox 1a : <input type="text" class="textBox1 valueEnter" style="background:#ccc;"/><br/>
TextBox 1b : <input type="text" class="textBox1 valueEnter" style="background:pink;"/> <br/> 
TextBox 2 : <input type="text" class="textBox2 valueEnter"/>
</div>
<br/>
<div class="second">
Show text 1a : <input type="text" class="textBox1" style="background:#ccc;"/> <br/> 
Show text 1b : <input type="text" class="textBox1" style="background:pink;"/> <br/>
show text2 : <input type="text" class="textBox2"/>
</div>

＆＃13;

Answer 2

我承认我不确定我是否完全理解这个问题，但你正在寻找这样的事情？

＆＃13;

var enter_idx = 0;
var reflect_idx = 0;
// This code supposes a relation between textboxes:
// the first ".textBox1 .valueEnter" input must be reflected 
// in the first ".textBox1" that does not have ".valueEnter" class
// if the logic is different, you have to modify it.
$(function() {  
  $('.textBox1').each(function() {
    if ($(this).hasClass('value-enter')) {
      $(this).attr('data-target', "#TextBox" + enter_idx);
      enter_idx += 1;
    } else {
      $(this).attr('id', "TextBox" + reflect_idx);
      reflect_idx += 1;
    }
  });
  // Now let's install the callbacks
  $('.value-enter').each( function() {
    $(this).keyup(function() {
      var target = String($(this).attr('data-target'));
      $(target).val($(this).val());
    }); 
  });
});

＆＃13;

/* 
I'm using different colors because I have colorblindness,
and I cannot see difference between pink and grey

Notice that those classes are not used in the JS code are only
for displaying purposes
*/
.textbox1a_v {
  background: green;
}

.textbox1b_v {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
TextBox 1a : 
<input type="text" class="textbox1a_v textBox1 value-enter"/><br/>
TextBox 1b : 
<input type="text" class="textbox1b_v textBox1 value-enter"/> <br/> 
Show text 1a : 
<input type="text" class="textbox1a_v textBox1"/> <br/> 
Show text 1b : 
<input type="text" class="textbox1b_v textBox1"/> <br/>
</div>

＆＃13;

我实际上不明白为什么还有textBox2 ...

如何将文本框的输入反映到另一个文本框中

2 个答案: