Ich habe eine JQuery-Funktion, die aktiv auf Hover setzt, ich möchte dies automatisieren, um Doppelarbeit zu vermeiden

Question

Ich habe ein ziemlich einfaches Stück von JQuery, die ein Element versteckt/sichtbar macht, basierend auf welche der Registerkarten sind über:

HTML:

<div class="row col-sm-4"> 
     <ul class="text-center"> 
     <li><p class="chat-provider-tab tab">Chat Provider</p></li> 
     <li><p class="operations-tab tab">Operations</p></li> 
     <li><p class="proactive-chat-tab tab">Proactive Chat</p></li> 
     </ul> 
    </div> 
    <div class="row col-sm-8"> 
     <p class="chat-provider helptip" style="display: none">Chat Provider</p> 
     <p class="operations helptip" style="display: none">Operations</p> 
     <p class="proactive-chat helptip" style="display: none">Proactive Chat</p> 
    </div> 

JQuery:

$(".chat-provider-tab").hover(function(){ 
    $(".chat-provider").toggleClass("activetab") 
}); 

$(".operations-tab").hover(function(){ 
    $(".operations").toggleClass("activetab") 
}); 

$(".proactive-chat-tab").hover(function(){ 
    $(".proactive-chat").toggleClass("activetab") 
}); 

ich möchte, dies automatisieren, wo möglich, und haben verschiedene Methoden ausprobiert haben sich jedoch nicht in der Lage gewesen, den Erfolg zu replizieren Ich habe mit der oben genannten Methode.

Danke, Suxors

Answer 1

Wenn Sie die .tab Elemente halten in der gleichen Reihenfolge wie Ihre .helptip Elemente, Sie so etwas wie dies nutzen könnten einige der Eintönigkeit Ihrer Funktionen zu entfernen (so dass Sie nicht haben zu schreiben, eine Hover-Funktion für jede Registerkarte und helptip Sie addieren):

$('.tab').hover(function(){ 
    $($('.helptip')[$(this).parent().index()]).addClass('activetab'); 
}, function(){ 
    $($('.helptip')[$(this).parent().index()]).removeClass('activetab'); 
}); 

Dies definiert einen schwebe Zuhörer für alle .tab Elemente, aus denen im Rahmen auf der Maustaste, fügen die activetab Klasse das .helptip Element, dessen Index (w (in ihrem Elternteil) entspricht dem Index der .tab Elementelternteil in ihrem Elternteil (da Ihre .tab Elemente selbst immer einen Index von 0 haben, musste ich stattdessen ihren Elternindex verwenden). Bei Hover-Out wird diese Klasse aus dem entsprechenden .helptip Element entfernt.

Ich entfernte auch die Inline-Style-Deklarationen und verwenden CSS display:none; für Ihre .helptip Elemente zu definieren, so dass ich nicht !important in der CSS verwenden haben muß (die Anzeige Eigenschaft zu ändern, und da ist es besser, nur CSS zu verwenden, um die .helptip Sichtbarkeit zu definieren, anstatt jede einzeln mit JavaScript zu steuern).

.helptip{ 
    display:none; 
} 
.activetab{ 
    display:block; 
} 

Hier ist ein Fiddle für Sie testen: https://jsfiddle.net/qsvnbz6t/