javascript - 如何从事件处理程序获取 jquery 选择器

Question

我在页面上有几个输入元素，其中一个(第一个)是我可以输入任何其他元素的特定 ID 的地方。

我希望我的代码设置方式如下:当我关注任何其他元素并且其 id 与第一个元素中输入的文本匹配时，它会突出显示，并且指示我选择正确元素的文本是显示在其中。

我使用第一个输入元素中输入的文本来形成我要查找的 ID。

到目前为止，这就是我所拥有的。

$(document).ready(function() {
     var selector; 
     
     $('#selector').on('input', function() {
         selector = $(this).val();
     });
     $('#' + selector).on('focus', function() {
         if ($(this).is('#' + selector)) {
             $(this).val("that's me: " + selector).css('border', 'solid red 1px');
         }
     }).on('blur', function() {
         $(this).val('').css('border', 'solid #555 1px');
     });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id='selector' type='text' /><br />
<input id='target1' type='text' /><br />
<input id='target2' type='text' /><br />
<input id='target3' type='text' /><br />

在第一个输入中输入任何目标输入元素的 ID 后，我设置了“选择器”值。但是，我的焦点处理程序似乎没有为任何其他输入元素触发，并且控制台上没有报告错误。可能是什么问题。

Answer 1

不要使用 $('#' +selector) 使用 $('input[id^=target]') (或添加一个公共(public)类)和你的其他逻辑保持不变

$(document).ready(function() {
     var selector; 
     
     $('#selector').on('input', function() {
         selector = $(this).val();
     });

     $('input[id^=target]').on('focus', function() {
         if ($(this).is('#' + selector)) {
             $(this).val("that's me: " + selector).css('border', 'solid red 1px');
         }
     }).on('blur', function() {
         $(this).val('').css('border', 'solid #555 1px');
     });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id='selector' type='text' /><br />
<input id='target1' type='text' /><br />
<input id='target2' type='text' /><br />
<input id='target3' type='text' /><br />