Question

我是webdesigner的新手，我开始学习JavaScript用于网站目的。在我的最新项目中，我遇到了一个问题。在创建菜单时，我想在悬停和点击时突出显示特定元素。

function hoverAndActive(firstElement, secondElement){
$(firstElement, secondElement).hover(function(){
        $(firstElement, secondElement).toggleClass("hoverMenu");
    }).mousedown(function(){
        $(firstElement, secondElement).addClass("activeMenu");
    }).mouseup(function(){
        $(firstElement, secondElement).removeClass("activeMenu");
    }).mouseleave(function(){
        $(firstElement, secondElement).removeClass("activeMenu")
    });
}

hoverAndActive("#home","#hometext");
hoverAndActive("#bio","#biotext");
hoverAndActive("#contact","#contacttext");

我想为每个menuelement创建悬停和鼠标点击的结构。虽然我可以通过重复函数中的结构来使它工作，但我不知道如何编写一次功能，只输入每个菜单项的id。我想通过JS而不是CSS来做到这一点，因为每对ID都位于html中非常不同的位置。

谢谢参观：）
Asger Kjeldsen

编辑：为函数添加了＃。措辞

编辑：添加HTML：

<div id="navigation">
    <div id="menu">
        <a href="#BodyHead"><div id="home" class="button"><img src="img/home.png"></div></a>
        <a href="#Test"><div id="bio" class="button"><img src="img/bio.png"></div></a>
        <a href="#"><div id="contact" class="button"><img src="img/contact.png"></div></a>
    </div>
    <div id="menutext">
        <a href="#BodyHead"><div id="hometext" class="button"><p>HJEM</p></div></a>
        <a href="#Test"><div id="biotext" class="button"><p>BIOGRAFI</p></div></a>
        <a href="#"><div id="contacttext" class="button"><p>KONTAKT</p></div></a>
    </div>
</div>

Answer 1

语法$(firstElement, secondElement)不会同时选择这两个元素。它会在 firstElement中选择secondElement ，即它等同于$(secondElement).find(firstElement)。

如果你想组合多个选择器，它们需要在一个选择器字符串中，用逗号分隔。

function hoverAndActive(firstElement, secondElement){ var bothItems = $(firstElement + ',' + secondElement); bothItems.hover(function(){ bothItems.toggleClass("hoverMenu"); }).mousedown(function(){ bothItems.addClass("activeMenu"); }).mouseup(function(){ bothItems.removeClass("activeMenu"); }).mouseleave(function(){ bothItems.removeClass("activeMenu") }); }

如何在JS / Jquery中组合几个悬停元素

1 个答案: