Как изменить значение для ввода на родителей jQuery

Question

У меня два входа внутри одного и того же div , и мне нужно изменить значение одного, когда я пишу в другом: Примечание: мне нужно использовать this, потому что у меня есть тот же div с тем же классом и id .

Мой код:

function customInput() {
  let customContent = event.target.value;
  let customInput = this.parents('.1');

  $(customInput .a1 .b1).val(customContent);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
    <div class="a1">
        <input type="text" class="b1" value="">
    </div>
    <div class="a2">
        <input type="text" class="b2" value="" onkeyup="customInput()">
    </div>
</div>
<div class="1">
    <div class="a1">
        <input type="text" class="b1" value="">
    </div>
    <div class="a2">
        <input type="text" class="b2" value="" onkeyup="customInput()">
    </div>
</div>

Answer 1

Для ссылки на текущий элемент в функции вы можете передать this в функцию.

Вы можете попробовать с помощью .closest() и .find()

function customInput(el) {
  $(el).closest('.1').find('.b1').val(el.value);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
    <div class="a1">
        <input type="text" class="b1" value="">
    </div>
    <div class="a2">
        <input type="text" class="b2" value="" onkeyup="customInput(this)">
    </div>
</div>
<div class="1">
    <div class="a1">
        <input type="text" class="b1" value="">
    </div>
    <div class="a2">
        <input type="text" class="b2" value="" onkeyup="customInput(this)">
    </div>
</div>

Хотя я предпочитаю использовать .on(), чтобы прикрепить событие (не используя встроенный обработчик события) вдоль с входом событие:

$('.b2').on('input', function() {
  $(this).closest('.1').find('.b1').val(this.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
    <div class="a1">
        <input type="text" class="b1" value="">
    </div>
    <div class="a2">
        <input type="text" class="b2" value="">
    </div>
</div>
<div class="1">
    <div class="a1">
        <input type="text" class="b1" value="">
    </div>
    <div class="a2">
        <input type="text" class="b2" value="">
    </div>
</div>

Answer 2

Вы просто смешиваете javascript с jQuery. Хотя это работает нормально, я думаю, что для удобства чтения лучше придерживаться одного из них, поэтому я изменил весь ваш код на jQuery.

Вместо встроенной привязки событий я использовал jQuery привязку событий. Я рекомендую избегать встроенного связывания, поскольку его проще поддерживать, и вы можете привязать несколько обработчиков к одному событию или переключать их с помощью метода jQuery off().

Также изменилось событие keyup на input событие, потому что это также работает, например, при вставке копии, вы можете придерживаться события keyup, если вы, конечно, этого не хотите.

С помощью функции jQuery closest() вы можете найти первое соответствующее совпадение. родитель. С помощью функции jQuery find() вы можете найти подходящих потомков.

Вы можете немного украсить свой код, чтобы использовать цепочку jQuery, если хотите. Так что я прокомментировал один вкладыш.

С помощью функции поиска вы можете найти элементы в родительском элементе.

$('.b2').on('input', function() {
    let $this = $(this);
    let customContent = $this.val();
    let $customInput = $this.closest('.1');

    $($customInput).find('.a1 .b1').val(customContent);

    //One liner that does the same.
    //$(this).closest('.1').find('.b1').val($(this).val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
    <div class="a1">
        <input type="text" class="b1" value="">
    </div>
    <div class="a2">
        <input type="text" class="b2" value="">
    </div>
</div>
<div class="1">
    <div class="a1">
        <input type="text" class="b1" value="">
    </div>
    <div class="a2">
        <input type="text" class="b2" value="">
    </div>
</div>