jQuery сосредоточиться на вводе текста с именем, идентичным идентификатору div

Question

У меня есть несколько ссылок. Когда я нажимаю на ссылку, я хочу, чтобы jQuery выделил соответствующий ввод.

Ссылки:

<a href="#" class="copy_go_to_input_field" data-divid="inp_copy_input_item_evidece_38">Focus</a>
<a href="#" class="copy_go_to_input_field" data-divid="inp_copy_input_item_evidece_39">Focus</a>
<a href="#" class="copy_go_to_input_field" data-divid="inp_copy_input_item_evidece_34">Focus</a>

Поля ввода:

<input type="text" name="inp_copy_input_item_evidece_38" value="2020_71_206_1" size="25" />
<input type="text" name="inp_copy_input_item_evidece_39" value="2020_71_206_1" size="25" />
<input type="text" name="inp_copy_input_item_evidece_40" value="2020_71_206_1" size="25" />

jQuery (не работает):

<script>
$(function() {
    $('.copy_go_to_input_field').click(function() {
        var field = $(this).data('divid');
                $('[name=""+ field + ""]').focus();

        return false;
        });
});
</script>

Answer 1

Вам действительно не нужно JS для этого. Вы можете сделать это довольно легко, используя <label>. Просто назначьте идентификатор для ваших входов и используйте атрибут for следующим образом:

<label class="copy_go_to_input_field" for="inp_copy_input_item_evidece_38">Focus</label>
<label class="copy_go_to_input_field" for="inp_copy_input_item_evidece_39">Focus</label>
<label class="copy_go_to_input_field" for="inp_copy_input_item_evidece_40">Focus</label>

<input type="text" id="inp_copy_input_item_evidece_38" name="inp_copy_input_item_evidece_38" value="2020_71_206_1" size="25" />
<input type="text" id="inp_copy_input_item_evidece_39" name="inp_copy_input_item_evidece_39" value="2020_71_206_1" size="25" />
<input type="text" id="inp_copy_input_item_evidece_40" name="inp_copy_input_item_evidece_40" value="2020_71_206_1" size="25" />

Answer 2

Первое, что всплывает, это то, что вы, кажется, неправильно использовали кавычки в селекторе имен.

<script>
$(function() {
    $('.copy_go_to_input_field').on('click', function() {
        var field = $(this).data('divid');
        $('[name="'+ field + '"]').focus();

        return false;
    });
});
</script>

Кроме того, вы должны попытаться использовать .on('click', function(){}) вместо .click(function(){}). Вы можете понять, почему здесь: Разница между .on ('click') и .click ()

Вы можете проверить решение @BenM, которое намного чище моего. Тот, который я опубликовал, содержит исправление для вашего JS. Но для нужной вам функциональности гораздо проще использовать то, что сделал @BenM.