jquery - 当悬停另一个与 id 和 class 相关的元素时更改元素的样式答案

【问题标题】：jquery - change style of element when hover another related with id and classjquery - 当悬停另一个与 id 和 class 相关的元素时更改元素的样式
【发布时间】：2014-05-15 17:14:34
【问题描述】：

当我将鼠标悬停在我的第二个菜单（子菜单）元素上时，我想更改我的第一个菜单项的颜色或任何样式（添加类）（并在不悬停时删除类）。这些菜单与 id 和 class 属性相关。我有一些问题。

我的 HTML：

<ul id="main-menu" class="mmenu">
<li class="mzr-drop panel-menu">
    <a class="menu-item menu-item-238" href="#">First</a>
    <a class="menu-item menu-item-243 active" href="#">Second</a>
    <a class="menu-item menu-item-246" href="#">Third</a>

    <div id="bg_menu_main" class="bg_menu">
            <div class="menu-header">
                <ul id="menu-main-nav-1" class="menu">
                    <li class="menu-item menu-item-238">
                        <ul class="sub-menu">
                        <li id="menu-item-239" class="menu-item menu-item-239">Item</li>
                        <li id="menu-item-240" class="menu-item menu-item-240">Item</li>
                        <li id="menu-item-241" class="menu-item menu-item-241">Item</li>
                        <li id="menu-item-242" class="menu-item menu-item-242">Item</li>
                        </ul>
                    </li>
                    <li class="menu-item menu-item-243">
                        <ul class="sub-menu">
                        <li id="menu-item-244" class="menu-item menu-item-244">Item</li>
                        <li id="menu-item-245" class="menu-item menu-item-245">Item</li>
                        </ul>
                    </li>
                    <li class="menu-item menu-item-246">
                        <ul class="sub-menu">
                        <li id="menu-item-247" class="menu-item menu-item-247">Item</li>
                        <li id="menu-item-248" class="menu-item menu-item-248">Item</li>
                        <li id="menu-item-249" class="menu-item menu-item-249">Item</li>
                        <li id="menu-item-250" class="menu-item menu-item-250">Item</li>
                        </ul>
                    </li>
                </ul>
            </div>
    </div>
</li>

$('ul#menu-main-nav-1 li').hover(function () {
    var id = $(this).attr('id');
    $('#main-menu li.panel-menu').find('a.menu-item-'+id).addClass('hover');
});

而且它不工作。我忘记了什么？请帮忙。谢谢

【问题讨论】：

尝试做一个“id”的console.log，它不能工作，因为var id被整个id名称填充-> menu-item-239，所以当你做$( '#main-menu li.panel-menu').find('a.menu-item-'+id).addClass('hover'); .find() 以这种方式填充 .find(a.menu-item-menu-item-239) （当然 239 是一个例子；））
查看我的更新答案

标签： javascript jquery html css menu

【解决方案1】：

试试这个

$('ul#menu-main-nav-1 li').find('li[id^="menu-item-"]').hover(function () {
    var id = $(this).attr('id');
    $('#main-menu li.panel-menu').find('a.'+id).addClass('hover');
});

【讨论】：

【解决方案2】：

通过查看您的标记，我猜您认为 id 仅给出一个整数，但 id 前面是 "menu-item-"，因此您的选择器将是 "menu-item-menu-item-xxx"，请尝试将您的代码更改为：

$('#main-menu li.panel-menu').find('a.' + id).addClass('hover');

甚至更少的代码：

$('#main-menu li.panel-menu a.' + id).addClass('hover');

编辑：似乎根本没有<a> 标签，所以这行不通。找个李：

$('#main-menu li.panel-menu.' + id).addClass('hover');

【讨论】：

好的。这里是jffidle。但还是不行。
是的，但仍然没有，我检查了你的代码，以及这个线程中的每一个。没有想法..
我的意思是你的标记中根本没有标签，那么这应该如何工作？
“a”标签在我的第一个菜单（第一、第二、第三项）中，所以在我的代码中。找到我查看这三个并选择 li id = 类的位置。还是行不通。在我的 jfiddle 中，当我将以下项目悬停时，我的顶部菜单没有改变。
对我来说很好用，只需添加适当的标记，否则人们将无法为您提供帮助

【解决方案3】：

find('a.menu-item-'+id)

如果id 是"menu-item-247"

所以它变成"a.menu-item-menu-item-247"

【讨论】：

请尝试建议更改代码，而不是指出代码的哪一部分似乎导致了该错误