Как я могу сопоставить определенные имена с идентификаторами в JavaScript/jQuery?

Проблема: я хочу выполнить итерацию по определенному набору атрибутов имени и добавить эти значения к определенному идентификатору.

У меня есть демо, которое пытается прочитать пользовательский ввод, и текст справа будет зеркально отражен соответственно.

В настоящее время я повторяю свои конкретные атрибуты имени. Однако теперь я хочу добавить к одному соответствующему текстовому полю справа. Вместо этого он добавляется ко всем четырем элементам.

Как я могу сопоставить эти элементы?

$('input[name^ = "text"]').on("change", function(e){
    var user_input = $(this).val();
  console.info(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>

10 очков кармы тому, кто первым найдет повторяющийся вопрос. У этого, вероятно, их 50, но у меня мало времени.

— 15.12.2020 22:19

javascript jquery

15.12.2020 21:57

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

369

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Я бы использовал index, если ваша разметка стабильно надежна. Никаких идентификаторов или других атрибутов не требуется.

$('.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>

15.12.2020 22:06

Ответ принят как подходящий

Мой предпочтительный метод — использование атрибута данных, который ссылается на целевой элемент и ссылается на него. Таким образом, вам не нужно беспокоиться об изменении вашего javascript, если вы измените свою разметку. Также событие input является лучшим вариантом для ввода текста.

$('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>

Еще лучше было бы использовать input[data-target] в качестве селектора, чтобы избежать селектора частичного атрибута :).

— 15.12.2020 22:32

15.12.2020 22:07

Используя замыкания и предполагая, что группы элементов <input> находятся в одном порядке:

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.info(user_input);
    $mirror.val(user_input);
  });
});

Здесь дело не столько в закрытии, сколько в том, что вы выбираете места назначения по индексу в массиве объектов jQuery, верно?

— 15.12.2020 22:18

@isherwood Теперь, когда вы спрашиваете, я не уверен. Я думал, что это то место, где я тянул i (теперь $mirror).

— 15.12.2020 22:27

15.12.2020 22:14