jQuery:在表单select focus上，显示div.在blur上隐藏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...

稍后，它也显示为：函数(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