我如何 map 特定名称到 JavaScript/jQuery 中的 ID？

Question

Problem: I want to iterate through a specific set of name attributes and append those values to a specific ID.

I have a demo that tries to read in a user input and the text to the right will get mirrored, respectively.

Currently I iterate through my specific name attributes. However, I now want to append to one respective text box to the right. It is appending to all four elements instead.

How can I map these elements?

 $('input[name^="text"]').on("change", function(e){ var user_input = $(this).val(); console.log(user_input); $('input[id^="id_text"').each(function() { let mirrored_value = $(this).val(user_input); }); });

 body { padding:10px; } input { margin: 20px 0 0 0; }.mirror{ float: left; margin-left: 20px; }.input{ float: left; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1> The right text box will mirror the left</h1> <div class="input"> <input type="text" name="text1" value=""><br> <input type="text" name="text2" value=""><br> <input type="text" name="text3" value=""><br> <input type="text" name="text4" value=""><br> </div> <div class="mirror"> <input type="text" id="id_text1" value=""><br> <input type="text" id="id_text2" value=""><br> <input type="text" id="id_text3" value=""><br> <input type="text" id="id_text4" value=""> </div>

Answer 1

My preferred method is using a data attribute that refers to the target element and refer to that. That way you don't have to worry about changing your javascript if you change your markup. Also the input event is the better option for text inputs.

 $('input[data-target]').on("input", function(e){ $($(this).data("target")).val($(this).val()); });

 body { padding:10px; } input { margin: 20px 0 0 0; }.mirror{ float: left; margin-left: 20px; }.input{ float: left; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1> The right text box will mirror the left</h1> <div class="input"> <input data-target="#id_text1" type="text" name="text1" value=""><br> <input data-target="#id_text2" type="text" name="text2" value=""><br> <input data-target="#id_text3" type="text" name="text3" value=""><br> <input data-target="#id_text4" type="text" name="text4" value=""><br> </div> <div class="mirror"> <input type="text" id="id_text1" value=""><br> <input type="text" id="id_text2" value=""><br> <input type="text" id="id_text3" value=""><br> <input type="text" id="id_text4" value=""> </div>

Answer 2

Using closures and assuming the <input> element groups are in the same order:

const $src = $('.input > input');
const $dst = $('.mirror > input');
$src.each((i,e) => {
  const $mirror = $dst.eq(i);
  $(e).on('change', e => {
    let user_input = $(e.currentTarget).val();
    console.log(user_input);
    $mirror.val(user_input);
  });
});

Answer 3

I would use index if your markup is consistently reliable. No IDs or other attributes necessary.

 $('.input input').on("keyup", function(e){ const idx = $(this).index(); const val = $(this).val(); $('.mirror input').eq(idx).val(val); });

 .input, .mirror {display: inline-block; width: 45%;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1> The right text box will mirror the left</h1> <div class="input"> <input type="text" name="text1" value=""> <input type="text" name="text2" value=""> <input type="text" name="text3" value=""> <input type="text" name="text4" value=""> </div> <div class="mirror"> <input type="text" value=""> <input type="text" value=""> <input type="text" value=""> <input type="text" value=""> </div>