jQuery的懸停在一個DIV的工作，而不是其他

我有兩個div如下：jQuery的懸停在一個DIV的工作，而不是其他

<div class="car-service" id="browse-all-button"> 
<p>CAR SERVICE</p> 
<span>56" Race Ramps</span> 
<span>67" Race Ramps XTs</span> 
<span>XTenders</span> 
<span>40" Sport Ramps</span> 
<span>Roll-Ups</span> 
<span>Portable Pit Stop</span> 
</div> 

    <div class="trailer-hauling" id="browse-all-button"> 
<p>TRAILER HAULING</p> 
<span>56" Race Ramps</span> 
<span>67" Race Ramps XTs</span> 
<span>XTenders</span> 
<span>40" Sport Ramps</span> 
<span>Roll-Ups</span> 
<span>Portable Pit Stop</span> 
</div>

jQuery是一個如下：

$(function(){ 



      $('#browse-all-button').hover(function(){ 
      $("p", this).stop().animate({textIndent:"25px", color:"#a12324"}, {duration:200}); 
      alert($(this).attr("class")); 
      }, 
     function(){ 
        $("p", this).stop().animate({textIndent:"10px", color:"#424242"}, {duration:150}) 
         }) 

     });

的影響作用於第一＃瀏覽，清一色按鈕，但不在第二個。我在那裏有一個警告，告訴我目前的div類是什麼，它甚至不會觸發第二個div。

http://www.raceramps.com/v2

您可以通過「瀏覽所有」，並懸停在那裏看到它。

感謝您的幫助！

來源

2010-01-07 Jared

Id browse-all-button應該只使用一次，因爲它是一個ID。改爲使用class。例如：

<div class="car-service browse-all-button">

而且

$('.browse-all-button').hover(...

來源

2010-01-07 16:33:03

非常感謝！我完全忘記了身份證和班... – Jared 2010-01-07 16:35:21

你有browser-all-button作爲ID兩個div的。 ID只能在整個頁面上使用一次，類可以多次使用。交換你的ID和班級，然後使用$(".browse-all-button")

例如

<div id="car-service" class="browse-all-button"> 
... 
<div id="trailer-hauling" class="browse-all-button"> 
... 
$('.browse-all-button').hover(...);

來源

2010-01-07 16:34:15

我注意到的一件事是您在兩個div上都使用瀏覽器全部按鈕ID。這會導致JavaScript不知道你想要哪個元素。你應該改變你的HTML看起來像我相信以下。

<div id="car_service" class="browse_all_button"> 
    <p>CAR SERVICE</p> 
    <span>56" Race Ramps</span> 
    <span>67" Race Ramps XTs</span> 
    <span>XTenders</span> 
    <span>40" Sport Ramps</span> 
    <span>Roll-Ups</span> 
    <span>Portable Pit Stop</span> 
</div> 

<div id="trailer_hauling" class="browse_all_button"> 
    <p>TRAILER HAULING</p> 
    <span>56" Race Ramps</span> 
    <span>67" Race Ramps XTs</span> 
    <span>XTenders</span> 
    <span>40" Sport Ramps</span> 
    <span>Roll-Ups</span> 
    <span>Portable Pit Stop</span> 
</div>

我也將連字符改爲下劃線。它更好地使用它們。這裏是你的javascript在這種情況下將如何改變。

$(function(){ 
    $('.browse_all_button').hover(function(){ 
     $("p", this).stop().animate({textIndent:"25px", color:"#a12324"}, {duration:200}); 
     alert($(this).attr("class")); 
    }, 
    function(){ 
     $("p", this).stop().animate({textIndent:"10px", color:"#424242"}, {duration:150}) 
    }); 
});

希望這有助於！

Metropolis

來源

2010-01-07 16:41:39 Metropolis

謝謝！問題是，爲什麼_比 - 更好？ – Jared 2010-01-08 15:25:04

jQuery的懸停在一個DIV的工作，而不是其他

回答

相關問題