vol stationnaire jquery travaillant sur un div, et non l'

Question

J'ai deux divs comme suit:

<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 est suit:

$(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}) 
         }) 

     }); 

L'effet fonctionne sur le premier # browse-tout- bouton, mais pas sur la seconde. J'ai une alerte là-bas pour me dire quelle est la classe div actuelle, et elle n'est même pas déclenchée sur la deuxième div.

http://www.raceramps.com/v2

Vous pouvez le voir là par « parcourir tous » et planant au-dessus.

Merci pour toute aide!

Answer 1

L'identifiant browse-all-button ne doit être utilisé qu'une seule fois, car il s'agit d'un identifiant. Utilisez la classe à la place. Par exemple:

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

Et

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

Answer 2

Vous avez browser-all-button comme ID pour les deux divs. Les identifiants ne doivent être utilisés qu'une seule fois sur toute la page, les classes peuvent être utilisées plus d'une fois. Échangez ce que vous avez pour les identifiants et les classes puis utilisez $(".browse-all-button")

par exemple.

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

Answer 3

Une chose que je remarque est que vous utilisez l'ID de navigation sur tous les divs. Cela entraînerait le javascript pour ne pas savoir quel élément vous voulez. Vous devriez changer votre HTML pour ressembler à ce qui suit je crois.

<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> 

J'ai également changé les traits d'union en traits de soulignement. Il vaut mieux les utiliser. Voici comment votre javascript changerait dans ce cas.

$(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}) 
    }); 
}); 

Espérons que cela aide!

Métropolis