我在页面上有几个输入元素,其中一个(第一个)是我可以输入任何其他元素的特定 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 后,我设置“选择器”值。但是,我的焦点处理程序似乎没有为任何其他输入元素触发,并且控制台上没有报告错误。可能是什么问题呢。
而不是使用$('#' +selector)
use $('input[id^=target]')
(或添加一个公共类)并且您的其他逻辑保持不变
$(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 />
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)