jQuery funktioniert nicht, wenn es mit dem WordPress-Menü verwendet wird

Ich verwende ein Starter-Thema, das mir von einem Freund zur Verfügung gestellt wurde, und habe jQuery mehrmals erfolgreich auf der Website implementiert. Ich möchte, dass ein Hintergrundbild in einem Div geändert wird, wenn der Benutzer im Menü auf eine Li klickt.

 $(function(){ $('.menu-item-23').click(function(){ $('#changeMe').css('background-image','url("../wp-content/themes/theme-name/i/logo4.png")'); }); 

Ich kann das schaffen, wenn ich .menu-item-23 durch andere Elemente auf der Seite ersetze – also weiß ich, dass es kein Dateipfadproblem ist, und ich glaube nicht, dass es der jQuery-Code ist. Es scheint, als ob ich das Listenelement nicht richtig auswähle, aber ich habe Dutzende verschiedener Selektoren ausprobiert (li # menu-item-23, li.menu-item-23, ul.mainNav li # menu-item-23 usw.) etc)

Solutions Collecting From Web of "jQuery funktioniert nicht, wenn es mit dem WordPress-Menü verwendet wird"

  • Sie vermissen -Tags
  • Sie verwenden den falschen jQuery-Variablennamen. Wenn Sie den $ Alias ​​verwenden möchten, müssen Sie noConflict als helgatheviking vorgeschlagen verwenden oder zu "jQuery" anstelle von $ wechseln
  • Du fehlst }); am Ende des Codes, den Sie oben gepostet haben
  • Sie sollten in Erwägung ziehen, Ihre JS in eine separate Datei zu trennen und wp_enqueue_script in den functionen des Themas oder in einer anderen geeigneten PHP-Datei für das Theme oder Plugin zu verwenden

Die Antwort von Björn hat einige sehr gute Punkte, aber ich würde das Javascript komplett vermeiden und css ähnlich verwenden:

 .mainNav li:active { background-image: transparent url('i/logo4.png') no-repeat; } 

Besser noch, ich würde stattdessen den Link selbst mit .mainNav a:active , was schlägt vor, dass Ihre Link Ziele sind nicht sehr groß und Sie verwenden die li nicht die a , um die Dimensionen und Größe / Polsterung / Marge zu definieren

Hier ist kein JavaScript erforderlich