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的工作，而不是其他

回答

相关问题