javascript - 在 jquery 的 rel 下调用 UL

Question

我正在尝试通过 jquery 调用我的 rel 下的无序列表，但我似乎使用了错误的语法

<div class="sun">
        title
        <div rel="subtitle1">
            <ul>
                <li>aaaaaaaaa</li>
            </ul>
        </div>

        <div rel="subtitle2">
            <ul>
                <li>bbbbbbbb</li>
            </ul>
        </div>
</div>

Javascript

$(this).hover(function() {
    $('.sun div[rel= "'+ $(this).attr('rel') +'"]').css({color: 'red'});
});

那么我在 jQuery 中附加什么来告诉它我只想更改 UL 的颜色，而不是整个 rel。

我试过了：

$('.sun div[rel= "'+ $(this).attr('rel') +'"] + ul + ').css({color: 'red'});

但这没有用。

Answer 1

您正在构建的选择器是：

.sun div[rel= "subtitle1"] + ul + 

但你想要：

.sun div[rel="subtitle1"] ul

删除+s 和额外的空间。

更好的是，停止滥用该rel属性并编写无效的 HTML。使用一个类。这就是类的设计目的。

.sun div.subtitle ul

更好的是，不要为此大惊小怪地使用 JavaScript。

.sun div.subtitle:hover ul {
    color: red;
}

更好的是，不要在悬停时更改非交互元素的外观。悬停效果是指示可以单击的内容的消息。