基于JavaScript实现菜单项title属性动态更新及点击填充输入框功能

Hey there, let's fix up your code to meet both requirements cleanly. Your original code had some redundant loops and selector issues, so here's a streamlined, easy-to-maintain approach:

1. Fixing Hover Tooltip Titles #

First, we'll replace those messy else if statements with a title mapping object—it's way simpler to update if you need to add more menu items later. We'll also fix the loop logic to target each menu item individually:

// Define your hardcoded titles in a reusable map (easy to update!)
const titleMap = {
  "B-1": "B-1: Business sector 1",
  "B-2": "B-2: Business sector 2",
  "D-5": "D-5: Development group 5"
};

// Iterate through each menu item to set the correct tooltip
$('a.UserSelectedItems').each(function() {
  const itemText = $(this).text().trim(); // Get the item's display text (trimmed to avoid whitespace issues)
  // Use the mapped title, or default to "Not categorized" if no match exists
  const tooltipTitle = titleMap[itemText] || "Not categorized";
  $(this).attr('title', tooltipTitle);
});

Key fixes & improvements: #

• No more redundant nested loops (we only process each item once)
• Cleaner title management with titleMap (add new entries in one place)
• Trimmed text to avoid matching failures from extra whitespace
• Fixed the selector typo ($('UserSelectedItems') → $('.UserSelectedItems'))

2. Adding Click-to-Populate Input Feature #

Now let's add the click event to fill the #populateTitle input. We can combine this with the tooltip setup to keep code DRY (Don't Repeat Yourself):

const titleMap = {
  "B-1": "B-1: Business sector 1",
  "B-2": "B-2: Business sector 2",
  "D-5": "D-5: Development group 5"
};

$('a.UserSelectedItems').each(function() {
  const $item = $(this);
  const itemText = $item.text().trim();
  const hardCodedTitle = titleMap[itemText] || "Not categorized";

  // Set hover tooltip
  $item.attr('title', hardCodedTitle);

  // Bind click event to populate the input field
  $item.on('click', function() {
    $('#populateTitle').val(hardCodedTitle);
  });
});

Full Working Example #

Here's the complete HTML + JS code you can drop in directly:

<div class="ui menu" id="Menu"> 
  <a class="UserSelectedItems" title="A-1">A-1</a> 
  <a class="UserSelectedItems" title="A-2">A-2</a> 
  <a class="UserSelectedItems" title="B-1">B-1</a> 
  <a class="UserSelectedItems" title="B-2">B-2</a> 
  <a class="UserSelectedItems" title="D-2">D-2</a> 
  <a class="UserSelectedItems" title="D-5">D-5</a> 
  <a class="UserSelectedItems" title="E-2">E-2</a> 
</div> 
<input type="text" id="populateTitle" placeholder="hardcoded title populate OnClick menu items">

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
const titleMap = {
  "B-1": "B-1: Business sector 1",
  "B-2": "B-2: Business sector 2",
  "D-5": "D-5: Development group 5"
};

$('a.UserSelectedItems').each(function() {
  const $item = $(this);
  const itemText = $item.text().trim();
  const hardCodedTitle = titleMap[itemText] || "Not categorized";

  $item.attr('title', hardCodedTitle);
  
  $item.on('click', function() {
    $('#populateTitle').val(hardCodedTitle);
  });
});
</script>

This implementation will:

• Show the correct hardcoded tooltip when hovering over any UserSelectedItems menu item
• Fill the input field with the corresponding title when you click a menu item
• Handle unmatched items with the "Not categorized" fallback automatically

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