javascript - jquery 多个和不断变化的 ids 选择器

Question

我有一个简单的问题，我想根据他们的 id 显示和隐藏我的 div，但无法弄清楚，例如我有不同的 div 和具有不同 id 的输入：

<input onfocus="showtip(1)" onblur="hidetip(1); />
<div id="tip1"></div>
<input onfocus="showtip(2)" onblur="hidetip(2); />
<div id="tip2"></div>

和

function showtip(id) {
    $('.tip[id]').show('slow');
}
function hidetip(id) {
    $('.tip[id]').hide('slow');
}

我可以用javascript编写它，使其工作，但我不能用动画隐藏它，因此我使用了jquery，但我无法定义ids :(谢谢大家的帮助！我真的很感激！

score 2 · Accepted Answer

要id在 jQuery 中使用该属性，请使用id 选择器：

$('#<yourid>').show('slow');

所以你的方法是：

function showtip(id) {
   $('#tip'+id).show('slow');
}

（注意：ids在整个文档中应该是唯一的，因此不需要div在选择器中包含该位）

如果您id的属性包含字符，例如.这意味着其他事物（即类选择器），那么您可以使用属性等于选择器：

$('[id="123.abc"]').show('slow')

score 1 · Accepted Answer

你的意思是：

function showtip(id) {
    $('#'+tip).show('slow');
    //OR
    $('yourElement[id="'+tip+'"]').show('slow');
}

score 1 · Accepted Answer

@ManseUK 的方法是迄今为止最常见的。但它在技术上是不正确的，例如它会因为 id 包含在 CSS 中具有其他含义的字符而失败，例如.. 最正确的解决方案是：

function showTip(id) {
    $(document.getElementById(id)).show("slow");
}

// This will work:
<div id="abc.123"></div>
showTip("abc.123");

这个解决方案也稍微快一点，因为在内部这就是 jQuery 将转换$("#" + id)的内容（在它工作的情况下）。

这是如何工作的：

3 回答 3