无法在选择器工作中获得jQuery'+ variable'

Question

我正在尝试根据h2标签内的第一个字符更改图像，该标签对应于名为jquery_image的div中图像集合的id

如果我有以下代码，那么我的图片将按预期更改

$(".jquery_image img:not([id=1)").hide();
$(".jquery_image img[id=2]").show();

然而，只要我尝试使用变量jTitle更改图像就没有任何反应

var jTitle = ($(this).text().substring(0,1));   
// alert(typeof jTitle); << string
$(".jquery_image img:not([id='+jTitle+'])").hide();
$(".jquery_image img[id='+jTitle+']").show();

为什么这段代码不起作用？我究竟做错了什么。 感谢

Answer 1

$(".jquery_image img:not([id='"+jTitle+"'])").hide();

或

$('.jquery_image img:not([id="'+jTitle+'"])').hide();

Answer 2

您正在使用差异化引号，将'更改为"：

$(".jquery_image img:not([id="+jTitle+"])").hide();
$(".jquery_image img[id="+jTitle+"]").show();

Answer 3

逃避你的报价：

$(".jquery_image img:not([id='"+jTitle+"'])").hide();
$(".jquery_image img[id='"+jTitle+"']").show();

Answer 4

jTitle需要在双引号字符串中完全在之外，否则您所做的只是将文字字符串[id='+jTitle+']放在选择器中：

$(".jquery_image img:not([id='" + jTitle + "'])").hide();

无论如何，根据@Raynos的评论，您应该使用#选择器来匹配ID，这使代码更容易遵循：

var sel = '#' + jTitle;
$(sel).show();
$('.jquery_image img').not(sel).hide();

顺便说一下，我似乎记得读过旧版浏览器不支持纯数字ID，尽管HTML5允许使用它们。

Answer 5

你传递的表达式是jquery是一个标准字符串，无法访问当前作用域的变量。你必须自己构建字符串：

$(".jquery_image img:not([id='"+jTitle+"'])").hide();