jquery悬停在一个div上工作，而不是在另一个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})
                        })

        } );

效果适用于第一个 #browse-all-button，但不适用于第二个。我在那里有一个警报告诉我当前的 div 类是什么，它甚至没有在第二个 div 上触发。

http://www.raceramps.com/v2

您可以通过“浏览全部”看到它，并且盘旋在上空。

感谢您的帮助！

Answer 1

Id browse-all-button 只能使用一次，因为它是一个 id。使用类来代替。例如：

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

并且

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

Answer 2

您将 browser-all-button 作为两个 div 的 ID。 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 上都使用了 browser-all-button 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})
   });
});

希望这有帮助！

都会