以变​​量为属性的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上的示例。

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