Wenn ich den Mauszeiger über ein Div halte, wie durchlaufe ich die Zeilen und zeige ein anderes div mit jQuery an?

Question

Ich versuche gerade, ein div zu zeigen, wenn ein anderes schwebt, aber ich habe Mühe, dies mit einer Schleife zu kombinieren.

Mein HTML ist:

<div class="row"> 
     <div class="half"> 
      <img class="restaurant-logo" src=""/> 
      <p>Lorem ipsum dolor sit amet. </p> 
      <strong><a href="">Continue Reading</a></strong> 
      <a class="button order" href="#">Order now</a> 
     </div> 

     <div class="half image" style="background-image: url();"> 
      <div class="quote"> 
       <div class="quote-text"><p>Highlighted text </p></div> 
      </div> 
     </div> 
    </div> 
     <div class="row"> 
     <div class="half"> 
      <img class="restaurant-logo" src=""/> 
      <p>Lorem ipsum dolor sit amet. </p> 
      <strong><a href="">Continue Reading</a></strong> 
      <a class="button order" href="#">Order now</a> 
     </div> 

     <div class="half image" style="background-image: url();"> 
      <div class="quote"> 
       <div class="quote-text"><p>Highlighted text</p></div> 
      </div> 
     </div> 
    </div> 

Die Idee ist folgendes:

Wenn Sie über die schweben "jetzt bestellen" klicken, die .quote-Text in der gleichen Zeile ändert sich von Opazität 0 bis Opazität 1.

Ich habe versucht, eine jede Anweisung zu implementieren und habe auch versucht, zu dem übergeordneten Element und zurück zu einem anderen Kind zu gehen, aber aus irgendeinem Grund jedes Mal, wenn ich schwebe, ändern sich alle .quote-Text.

Meine jQuery ist unten.

$('.order').each(function() { 
    $(this).hover(
     function() { 
      $('.order').closest('.row').find('.quote').css('opacity', '1'); 
     }, 
     function() { 
      $('.order').closest('.row').find('.quote').css('opacity', '0'); 
     } 
    ); 
}); 

Jede Hilfe wäre sehr geschätzt werden, fühle mich, dass ich bin in der Nähe, aber meine jQuery Fähigkeiten sind begrenzt und Internet-Recherchen und Versuch und Irrtum haben mir nicht geholfen!

Answer 1

Das Problem, das Sie haben, ist, dass Sie alle Elemente .order auf Hover auswählen. Stattdessen können Sie das Schlüsselwort this verwenden, um nur auf denjenigen Bezug zu nehmen, der das Ereignis ausgelöst hat. Versuchen Sie folgendes:

$('.order').each(function() { 
    $(this).hover(function() { 
     $(this).closest('.row').find('.quote').css('opacity', '1'); 
    }, function() { 
     $(this).closest('.row').find('.quote').css('opacity', '0'); 
    }); 
}); 

Von dort können Sie die Logik viel prägnanter machen durch die redundante each() Schleife zu entfernen, und eine einzelne Funktion zu hover() bereitzustellen, die sowohl unter dem mouseenter und mouseleave Ereignis ausgelöst wird, die gerade toggle() auf die Anrufe .quote angemessen:

$('.order').hover(function() { 
    $(this).closest('.row').find('.quote').toggle(); 
});