jQuery的悬停在一个DIV的工作，而不是其他

Question

我有两个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

您可以通过“浏览所有”，并悬停在那里看到它。

感谢您的帮助！

Answer 1

Id browse-all-button应该只使用一次，因为它是一个ID。改为使用class。例如：

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

而且

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

Answer 2

你有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(...); 

Answer 3

我注意到的一件事是您在两个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