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

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

我希望我的代码设置为这样，当我关注任何其他元素时，其id与在第一个元素中输入的文本匹配，它将高亮显示，并在其中显示指示我选择了正确元素的文本

我使用在第一个输入元素中输入的文本来形成我正在寻找的id

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

$（文档）.ready（函数（）{
var选择器
$（'#选择器'）。在（'input'，function（）上{
选择器=$（this.val（）；
    });
$（'#'+选择器）.on（'focus'，function（）{
if（$（this）.is（“#”+选择器））{
$（this.val（“那是我：+selector”）.css（'border'，'solid red 1px'）；
}
}）。on（'blur'，function（）{
$（this.val（“”）.css（'border'，'solid#555 1px'）；
});
});








charlietfl是对的。您必须首先定义
选择器
。因此，通过简单地将焦点和模糊函数放置在输入函数中，它仅在定义了选择器时才起作用


$（文档）.ready（函数（）{
var选择器
  
$（'#选择器'）。在（'input'，function（）{
选择器=$（this.val（）；
$（'#'+选择器）.on（'focus'，function（）{
如果（$（this）.is（'#'+选择器））{
$（this.val（“那是我：+selector”）.css（'border'，'solid red 1px'）；
}  
}).on（'blur'，function（）{
$（this.val（“”）.css（'border'，'solid#555 1px'）；
});  
});  
});








您已在开始时使用
未定义的值定义了事件，并且不再对其进行更改。当变量中有值时，必须在输入后创建eventListener

别忘了解开老听众的束缚

在每次输入时，您应该使用jQuery
unbind
来解除您以前的侦听器的绑定，这样它就不会继续堆积，并且不要忘记检查元素是否存在

unbind（）方法在3.0版中被弃用。请改用off（）方法。您可以阅读有关off（）的更多信息


$（文档）.ready（函数（）{
var选择器；
var$元素；
var$newElement；
$（'#选择器'）。在（'input'，function（）上{
选择器=$（this.val（）；
$newElement=$（“#”+选择器）；
如果（$newElement）{
如果（$element）$element.off（）；
$element=$newElement；
$element.on（'focus'，function（）{
if（$（this）.is（“#”+选择器））{
$（this.val（“那是我：+selector”）.css（'border'，'solid red 1px'）；
}
}).on（'blur'，function（）{
$（this.val（“”）.css（'border'，'solid#555 1px'）；
});
}
})
});








在程序开始时，当
选择器
仍未定义时，您的代码尝试将
聚焦
+
模糊
处理程序附加一次：

$('#' + selector).on('focus', function() {

相反，您需要做的是在
#选择器
更改时重新附加处理程序（同时确保取消附加以前的处理程序）：


$（文档）.ready（函数（）{
var-elem
$（'#选择器'）。在（'input'，function（）上{
if（elem）{
元素关闭（“焦点”）；
元素关闭（“模糊”）；
}
elem=$（'#'+$（this.val（））；
要素on（'焦点'，功能（）{
$（this.val（“那是我：+selector”）.css（'border'，'solid red 1px'）；
});
元素开（'blur'，函数（）{
$（this.val（''）.css（'border'，''）；
});
    });
});








不要使用
$（'#'+选择器）
使用
$（'input[id^=target]'）
（或添加公共类），其他逻辑保持不变


$（文档）.ready（函数（）{
var选择器
$（'#选择器'）。在（'input'，function（）上{
选择器=$（this.val（）；
    });
$（'input[id^=target]'）。在（'focus'，function（）上{
if（$（this）.is（“#”+选择器））{
$（this.val（“那是我：+selector”）.css（'border'，'solid red 1px'）；
}
}）。on（'blur'，function（）{
$（this.val（“”）.css（'border'，'solid#555 1px'）；
});
});








就像charlietfl对你的问题发表评论一样。您正在将焦点事件侦听器设置为尚未获取值的选择器<代码>$（“#”+选择器）
在初始化时没有结果，因此不会发生任何事情

大多数代码都很好，但问题在于选择
元素之后的输入

您需要将事件侦听器设置为除第一个输入之外的所有输入，并侦听它们的聚焦和模糊

$('input:not(#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');
});  

现在，您可以自由更改选择器变量，并在用户每次关注除第一个输入外的所有输入时检查它

编辑：这是我对stackoverflow的第一个评论，我正试图从中学习。如果这是错误的，那么谁能帮我解释一下原因。谢谢
 在发生定义
选择器的事件之前，不能使用
$（'#'+选择器）
。现在，您的代码的计算结果为
$（'#'+未定义）
，并且仅在页面加载时运行。这似乎是一个奇怪的UI…您的实际用例是什么？@charlietfl，假设ID是通过编程生成的，标记是来自服务器查询的搜索结果。我可以将搜索字符串与目标ID关联起来，例如查找最佳搜索结果。好的，但它们不会在
中，是吗？您如何知道
id