以变​​量为属性的 jQuery 图像选择器

Question

我遇到了 jQuery 选择器的问题（再次）。我敢肯定这真的很简单，但我似乎很挣扎。

这是导致我出现问题的选择器。变量 ClassImg 和 TitleImg 似乎都可以。

$('img [class=' + ClassImg + '][attr="1"][title=' + TitleImg + ']').attr("src", "../graphics/stars/FullStar.png");

我一直在这里摆弄它：http://jsfiddle.net/PottyMonster/aYr8e/

提前感谢您的帮助。

丹

Answer 1

一些有用的注释：

1. 您可以使用 img.' + ClassImg 类选择器而不是 [attr] 选择器作为类名。
2. 我猜你的意思是alt=1
3. 由于您使用的是 jquery，因此请查看使用 .hover()，因为这将有助于减少 Unobtrusive javascript 的生成。
4. 如果您使用 Unobtrusive javascript 将您的事件处理程序包装在 $(document).ready(function(){}); 或只是 $(function(){});

通过查看您的示例，您希望在悬停时突出显示星星。 由于您在<p> 标签下有星星，您可以在<img> 上调用父级，然后使用:lt() 选择器选择比您悬停的当前星星少的<img/> 星星。将所有这些放在一起最终会得到以下内容：

$("img").hover(function() {
    var AltImg = $(this).attr("alt");
    $(this).parent().children(":lt(" + AltImg + ")").attr("src", "http://www.sweetashoney.co.uk/graphics/stars/FullStar.png");
},
function() {
    $('img[name=FeedbackStar]').attr("src", "http://www.sweetashoney.co.uk/graphics/stars/EmptyStar.png");
});

jsfiddle 上的示例。

希望这会有所帮助！如果我错过了标记，请告诉我，我会重新访问。