2010-11-23 14 views
0

は、あなたがこのコードを持って言う:jQueryのホバー複数の項目

$("#sub_nav_home1").hover(function() { 
     $("#homepage").removeClass(); 
     $("#homepage").addClass("homepage1"); 
    }); 
    $("#sub_nav_home2").hover(function() { 
     $("#homepage").removeClass(); 
     $("#homepage").addClass("homepage2"); 
    }); 
    $("#sub_nav_home3").hover(function() { 
     $("#homepage").removeClass(); 
     $("#bhomepage").addClass("bhomepage3"); 
    }); 

    <ul class="nav sub_nav_home"> 
     <li id="sub_nav_home1"><a href="#"><span>LINK1</span></a></li> 
     <li id="sub_nav_home2"><a href="#"><span>LINK2</span></a></li> 
     <li id="sub_nav_home3"><a href="#"><span>LINK3</span></a></li> 
    </ul> 

我々は一度だけホバーjQueryの機能を行うことができた方法があるが、代わりのリンクあたり1?

感に

乾杯

+1

"一度だけ"詳しく説明できますか? –

+0

@ブラッドに同意します。あなたは['.one()'](http://api.jquery.com/one)をお探しですか? –

+0

私の答えを確認してください、私はあなたが探しているものを知っていると思うし、あなたが持っているDOMマークアップに基づいて最も簡単な実装にしました。 –

答えて

1

のErr、私は考えることができる最も簡単な方法は、(これはあまりにもダイナミックになります)です。

$("#sub_nav_home a").hover(function() { 
     $("#homepage").removeClass().addClass("homepage"+$(this).parent().attr('id').split('sub_nav_home')[1]); 
    }); 

    <ul class="nav sub_nav_home"> 
     <li id="sub_nav_home1"><a href="#"><span>LINK1</span></a></li> 
     <li id="sub_nav_home2"><a href="#"><span>LINK2</span></a></li> 
     <li id="sub_nav_home3"><a href="#"><span>LINK3</span></a></li> 
    </ul> 

これは、クラスのホームページ[その親の中のID番号]、つまりhomepage1、home PAGE2など

--UPDATE--

これはあなたのために働く必要があります(しかし、私はそれをテストdidntの!

//find the first li and add a class of current to start the loop 
$('.sub_nav_home li:first').addClass('current'); 
//Here we set the loop 
setInterval(function(){ 
    //Here we are checking if there IS a next item. If there IS it'll return 1 
    //which will make this if() true (1 > 0) 
    if($('.current').next().length > 0){ 
     //Here we grab the current .current, remove the class, get the next item 
     //and then add .current to that 
     $('.current').removeClass('current').next().addClass('current'); 
    } 
    else{ 
     //If the if() fails (returns 0 [no next() item]) we'll get the current 
     //.current, remove the class, get the parent, find the first item in the 
     //parent (first <li> of the <ul>) and add a class of current 
     $('.current').removeClass('current').parent().find(':first').addClass('current'); 
    } 
},3000) //3000 = 3 seconds 

P.S.私に知らせてください。これがあなたのために働くなら、私に最高の投票を与えることを確認してください;)

+0

クール - それは働いた。 – user

+0

別のもの...どのように回転する各 "li"にクラスを追加しますか?クラス "current"を最初の "li"に追加し、3秒後にそのクラスを削除し、それを次の "li"に追加して、再び開始します。 – user

+0

OK、私は自分の投稿を更新しました。それが動作しない場合は教えてください。私はそれをテストしなかったが、それはすべきである。 –

0

各リーにクラスを追加作ら希望:

<li class="c1" id="sub_nav_home1"><a href="#"><span>LINK1</span></a></li> 

$('ul.nav sub_nav_home li').hover(function() { 
     $("#homepage").removeClass(); 
     $("#bhomepage").addClass("bhomepage" + this.className.replace("c","")); 
    }); 
関連する問題