Jquery“突出显示”具有相同类的元素

Question

我正在尝试实现这一点：

我有类似的东西：

<ul>
<li><a href="#" class="class-1">Link 1</a></li>
<li><a href="#" class="class-2">Link 2</a></li>
<li><a href="#" class="class-3">Link 3</a></li>
</ul>

<img src="img-desc.jpg" class="class-1" />
<img src="img-desc-1.jpg" class="class-2" />
<img src="img-desc-2.jpg" class="class-3" />

我希望每次用户将鼠标移到 ul>li 之一上时，具有匹配类的图像都会获得红色边框。我怎样才能做到这一点？

非常感谢大家，我希望你们能帮助我解决这个问题。

Answer 1

您可以这样做：

示例： http://jsfiddle.net/Q7knH/

$('ul > li').hover(function() {
    $('img.' + $(this).children('a').attr('class') ).css('border','2px solid red');
},function() {
    $('img.' + $(this).children('a').attr('class') ).css('border','');
});

或者，如果您确定

元素的 周围不会有任何空格，则可以将其缩短一点：

示例： http://jsfiddle.net/Q7knH/1/

$('ul > li').hover(function() {
    $('img.' + this.firstChild.className ).css('border','2px solid red');
},function() {
    $('img.' + this.firstChild.className ).css('border','');
});

或者如果您希望将鼠标悬停在 上，然后执行以下操作：

示例：

$('ul > li > a').hover(function() {
    $('img.' + this.className ).css('border','2px solid red');
},function() {
    $('img.' + this.className ).css('border','');
});