javascript - jQuery：在表单选择焦点上，显示 div。隐藏 div 模糊

Question

对不起我的英语不好

我有这个代码：

jsfiddle

没问题

当“选择”是这样的时，我如何调整代码：

<select id="example[164]" name="example[164]" type="text" />
<option value="0">0</option>    
<option value="1">1</option>    
<option value="2">2</option>    
<option value="3">3</option>    
</select>
<div class="test">    
Some text...<br /><input type="checkbox" name="foobar" value="1" /><br />More text...       
</div>`

jsfiddle

谢谢你的帮助

:D)

Answer 1

除 HTML5 外，此 HTML 无效。[]属性中不允许使用字符id，应为字母、数字、句点、连字符、下划线和冒号。

要将无效的 id 与 jQuery 匹配，您需要[]使用两个反斜杠来转义：

// Match all select elements beginning with example in the id
$('#example\\[164\\]')

在您的示例的上下文中，更改$('#example')为$('#example\\[164\\]')

$('#example\\[164\\]').focus(function() {
    if (timer)
        clearTimeout(timer);
    $('div.test').css('display','block');
    // etc...

后来也出现为：function(e){

    if ($(e.target).closest('.example, #example\\[164\\]').length) return;

但是，由于这不是有效的 id 属性（除非您使用 HTML5），您应该改为匹配元素的name属性，如果这是在服务器端生成的，请将 id 属性更改为有效的值，例如<select id='example_164'>.

// [] are valid in a name
$('select[name="example[164]"').focus(function() {
    if (timer)
        clearTimeout(timer);
    $('div.test').css('display','block');

这是更新的jsfiddle