2016-07-29 9 views
0

Ich möchte Text vom Link <a class="active">...</a> erhalten, der durch Tab-slider in wordpress wie im Bild verursacht wurde.Erhalten Sie Text von Verbindung Gebrauch jQuery

enter image description here

hier sind meine Jquery

jQuery(document).ready(function(){ 
     var text = jQuery('.mk-tab-slider-nav a.active').text(); 
     alert(text + ""); 
    }); 

nur, wenn ich jQuery('.mk-tab-slider-nav a') verwenden sie die Texte alle von allen <a /> hat.

aber es wird nur leer, wenn ich '.mk-tab-slider-nav a.active' oder '.mk-tab-slider-nav .active' oder '.mk-tab-slider-nav:first-child' nur um zu überprüfen, wird es auch leer.

Bitte helfen Sie mir, was zu <a /> passieren könnte, dass wir verursachen keinen Text von .text()

+0

Versuchen mit .html() und geben bitte Ihre vollständigen hTML –

+0

ich nicht voll html bekommen kann mich, sein Wordpress-Projekt und das ist hTML-Code wurde von Tab Slider in Wordpress erstellt – pexichdu

+0

$ ('. Mk-tab- slider-nav '). find (' a.active ') .html(); versuchen Sie dies – BlackBurn027

Antwort

1

Sie erhalten eine "leere" Abfrage bekommen kann, weil Der Klassenname active wird nach dem Ereignis document ready hinzugefügt ... Dieser Klassenname wird hinzugefügt, wenn das Tab slider plugin startet (oder wenn jemand klickt ks auf eine Registerkarte) ...

Sie benötigen einen Blick auf das Plugin und ihre Veranstaltung haben (wenn es eine api set) aussetzt ...

eine schmutzige Lösung eine Uhr Anwendung auf dem dom werden könnten ...

jQuery(document).on(
 
    "tabSliderActiveText", (event, data) => { 
 
    console.log("TEXT", data); 
 
    } 
 
); 
 

 
jQuery(document).ready(($) => { 
 
    let selector = '.mk-tab-slider-nav a.active'; 
 
    
 
    let interval = window.setInterval(() => { 
 
    let links = $(selector); 
 
    if(links.length < 1) { 
 
     return; 
 
    } 
 
    
 
    window.clearInterval(interval); 
 
    $(document).trigger("tabSliderActiveText", { 
 
     text: links.text(), 
 
     item: links 
 
    }); 
 
    }, 200); 
 
    
 
});
.active { 
 
    background: lightseagreen; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="mk-tab-slider-nav"> 
 
    <a>FOO</a> 
 
</div> 
 
<div class="mk-tab-slider-nav"> 
 
    <a>FOO 1</a> 
 
</div> 
 
<div class="mk-tab-slider-nav"> 
 
    <a>FOO 2</a> 
 
</div> 
 
<div class="mk-tab-slider-nav"> 
 
    <a>FOO 3</a> 
 
</div> 
 
<div class="mk-tab-slider-nav"> 
 
    <a>FOO 4</a> 
 
</div> 
 

 
<script> 
 
    //Mock the WP Plugin 
 
    document.addEventListener("DOMContentLoaded",() => { 
 
     window.setTimeout(() => { 
 
     document 
 
     .querySelector("a") 
 
     .classList 
 
     .add('active') 
 
     ; 
 
     }, 3000); 
 
    }); 
 
</script>

+0

Hallo, ich denke du hast recht Ich benutze window.setTimeout (show_popup, 5000) und es scheint zu funktionieren, aber dein Code ist sehr kompliziert, ich kann jetzt nicht verstehen. gibt es eine Möglichkeit, es auf 5s setTimeout warten zu lassen, wie ich es zuerst getan habe, aber dann Text bekommen, nachdem ich sofort auf einen anderen Link geklickt habe, während sich die aktive Klasse schnell ändert? Ich bin so neu, bitte hilf mir. – pexichdu

+0

Sie müssen sich das Plugin ansehen, das Sie verwenden ... Jedes gute Plugin stellt eine Reihe von APIs zur Verfügung. Ich nehme an, dass es einige JavaScript-Ereignisse wie "onTabChange" verfügbar macht, an die Sie einen Callback anhängen können ... Geh auf die Hauptseite dieses Plugins! – Hitmands

0

$(document).ready(function(){ 
 
    console.log($('div.mk-tab-slider-nav a.active').text()); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mk-tab-slider-nav"> 
 
    <a href="#" >123</a> 
 
    <a href="#" class="active">456</a> 
 
</div>

Arbeitsbeispiel

Verwandte Themen