如何优化函数实现多组listSub与route元素的淡入淡出效果？

Yep, you absolutely don't need to write duplicate hover handlers for every pair—this is exactly where we can use either consistent naming patterns or data attributes to keep our code clean and scalable. Let's break down two solid approaches:

Approach 1: Leverage Consistent Naming Patterns #

Since your pairs follow a clear pattern (listSub1 ↔ routeA, listSub2 ↔ routeB, etc.), we can extract the matching identifier from the hovered element's class and target the corresponding element dynamically.

Code Implementation: #

// Bind hover event to all elements starting with "listSub"
$("[class^='listSub']").hover(function() {
  // Extract the numeric suffix from the hovered element's class (e.g., "1" from "listSub1")
  const numMatch = $(this).attr("class").match(/listSub(\d+)/);
  if (!numMatch) return; // Exit if no valid number found
  
  const num = parseInt(numMatch[1], 10);
  // Convert number to corresponding letter: 1 → "A", 2 → "B", etc.
  const targetLetter = String.fromCharCode(64 + num);
  
  // Target the matching route element and trigger fadeToggle
  $(`.route${targetLetter}`).stop().fadeToggle(500);
});

Notes: #

• The [class^='listSub'] selector targets all elements whose class starts with listSub.
• We use a regex to safely extract the numeric part of the class—if your elements have multiple classes, this still works as long as one of them follows the listSubX pattern.
• String.fromCharCode(64 + num) converts numbers to uppercase letters (since ASCII code for "A" is 65, 64+1=65, etc.).

Approach 2: Use Data Attributes (More Flexible) #

If you want to decouple the hover trigger from strict class naming (or need to target non-standard selectors), data attributes are a cleaner, more maintainable option.

Step 1: Update Your HTML #

Add a data-target attribute to each trigger element, specifying the selector for its corresponding target:

<div class="listSub1" data-target=".routeA">Hover Trigger 1</div>
<div class="listSub2" data-target=".routeB">Hover Trigger 2</div>
<!-- ... add as many as you need ... -->

<div class="routeA">Target Element A</div>
<div class="routeB">Target Element B</div>

Step 2: Write the Reusable jQuery Code #

// Bind hover event to all elements with a data-target attribute
$("[data-target]").hover(function() {
  // Get the target selector from the data attribute
  const targetSelector = $(this).data("target");
  // Trigger the fadeToggle on the target element
  $(targetSelector).stop().fadeToggle(500);
});

Why This Is Great: #

• No dependency on class name patterns—you can target any element (e.g., #special-target, .custom-class) just by updating the data-target value.
• The code is self-documenting: anyone reading the HTML can immediately see which trigger maps to which target.

Quick Reminder: #

Keep the .stop() method—it prevents animation queue buildup if the user hovers in/out quickly, which was a smart choice in your original code!

内容的提问来源于stack exchange，提问作者Scott