Making a smarter jQuery code applied to a Wordpress Menu - Stack Overflow

admin管理员组

文章数量:1122832

On my Wordpress menu I tagged a .custom-class-n on each links via the back-office. This gives a menu structure like this :

<ul>
  <li id="menu-item-227" class="custom-class-1 menu-item ..."></li>
  <li id="menu-item-228" class="custom-class-2 menu-item ..."></li>
  ...
  <li id="menu-item-n" class="custom-class-n menu-item ..."></li>
</ul>

For each .custom-class I have another list that mirrors like this :

<div>
  <p class="custom-class-1"></p>
  <p class="custom-class-2"></p>
  ...
  <p class="custom-class-n"></p>
</div>

The end result is : when I hover .custom-class-1 thenp.custom-class-1 reacts. For now, I managed it through jQuery via this code :

jQuery( document ).ready(function( $ ) {
$('li.custom-class-1').on("mouseenter", function () {
    $('p.custom-class-1').addClass("hover");
    }).on("mouseleave", function () {
    $('p.custom-class-1').removeClass("hover");
    }); });

It works fine, but I have to duplicate it for each instance which is big and not viable for the end user.

How do I make this code? So I don't have to copy-paste it for every .custom-class-n

Note that the .custom-class-n is always first in line in the wordpress structure.

On my Wordpress menu I tagged a .custom-class-n on each links via the back-office. This gives a menu structure like this :

<ul>
  <li id="menu-item-227" class="custom-class-1 menu-item ..."></li>
  <li id="menu-item-228" class="custom-class-2 menu-item ..."></li>
  ...
  <li id="menu-item-n" class="custom-class-n menu-item ..."></li>
</ul>

For each .custom-class I have another list that mirrors like this :

<div>
  <p class="custom-class-1"></p>
  <p class="custom-class-2"></p>
  ...
  <p class="custom-class-n"></p>
</div>

The end result is : when I hover .custom-class-1 thenp.custom-class-1 reacts. For now, I managed it through jQuery via this code :

jQuery( document ).ready(function( $ ) {
$('li.custom-class-1').on("mouseenter", function () {
    $('p.custom-class-1').addClass("hover");
    }).on("mouseleave", function () {
    $('p.custom-class-1').removeClass("hover");
    }); });

It works fine, but I have to duplicate it for each instance which is big and not viable for the end user.

How do I make this code? So I don't have to copy-paste it for every .custom-class-n

Note that the .custom-class-n is always first in line in the wordpress structure.

• jquery
• wordpress
• menu

Share Improve this question Follow asked Nov 22, 2024 at 10:48 cfocketcfocket 10922 silver badges1515 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

You need to delegate - life gets easier if you use data attributes

$(function() {
  $('li[id^="menu-item"]').on("mouseenter mouseleave", function(event) {
    $(`p.${this.dataset.target}`).toggleClass("hover", event.type === "mouseenter");
  });
});

p.hover {
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<ul>
  <li id="menu-item-227" data-target="custom-class-1" class="menu-item">227</li>
  <li id="menu-item-228" data-target="custom-class-2" class="menu-item">228</li>
  <li id="menu-item-n" data-target="custom-class-n " class="menu-item">n</li>
</ul>
<div>
  <p class="custom-class-1">P 1 </p>
  <p class="custom-class-2">P 2</p>
  <p class="custom-class-n">P n</p>
</div>

本文标签： Making a smarter jQuery code applied to a Wordpress MenuStack Overflow