使用javascript根据当前菜单项动态更新title属性

Question

​

var a; titleText=""; hardCodedTitle="";
var menuCount = document.getElementsByClassName().length;
$('a.UserSelectedItems').each(function(){
for(a=0; a<menuCount; a++){
title += $('a.UserSelectedItems')[a].innerText;
if(title == "B-1"){
hardCodedTitle = "B-1: Business sector 1";
$('a.UserSelectedItems').attr('title',hardCodedTitle);
}
else if(title == "B-2"){
hardCodedTitle = "B-2: Business sector 2";
$('a.UserSelectedItems').attr('title',hardCodedTitle);
}
else if(title == "D-5"){
hardCodedTitle = "D-5: Development group 5";
$('a.UserSelectedItems').attr('title',hardCodedTitle);
}
else{
hardCodedTitle = "Not categorized";
$('UserSelectedItems').attr('title',hardCodedTitle);
}
}
});

<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">
//OnClick of menu item, hardcode title value as per the js should be populated in this text box

​

我有一个要求，在悬停每个菜单项(菜单是根据用户选择的动态更新)，硬编码标题必须动态填充。从现在开始，我可以将动态菜单项作为标题，我需要帮助使用javascript根据每个动态菜单项填充硬编码的标题。

上面是示例代码(不是工作的确切代码)来显示我的场景。首先，根据用户选择，填充菜单项(很少可能未被选中)。因此，我的要求是根据用户选择的菜单项显示硬编码值作为标题。

如果用户选择项目: B-1，B-2，D-5，那么硬编码标题必须显示为弹出在悬停每个菜单项。

div class="ui menu" id="Menu">
...
<a class="UserSelectedItems" title="${eachDataSet.getKey()}">${eachDataSet.getKey()}</a>
</div>

我的实际html代码看起来有点像上面所示。谢谢!

第二版..。我使用了下面的代码(由@rucha回答)，它运行良好。现在，额外的要求是，我有一个输入字段的文本类型。如何在单击每个项目时将标题(每个菜单项的硬编码标题)填充为文本框值？

Answer 1

有一些基本的错误，比如，

1. 在访问document.getElementsByClassName()时，需要传递类名。就像document.getElementsByClassName("UserSelectedItems");
2. If一样，您使用的是$.each，您不需要再次使用for循环来实现相同的目的。

我已经修改了代码，以便在$.each块中，根据您的条件，将标题分配给每个<a>链接。

​

var a;
titleText = "";
hardCodedtitle = "";
var menuCount = document.getElementsByClassName("UserSelectedItems");
$(menuCount).each(function(index, item) {
  title = item.title;
  if (title == "B-1") {
    hardCodedTitle = "B-1: Business sector 1";
    $(item).attr("title", hardCodedTitle);
    $(item).attr("data-hardcoded", "true");
  } else if (title == "B-2") {
    hardCodedTitle = "B-2: Business sector 2";
    $(item).attr("title", hardCodedTitle);
    $(item).attr("data-hardcoded", "true");
  } else if (title == "D-5") {
    hardCodedTitle = "D-5: Development group 5";
    $(item).attr("title", hardCodedTitle);
    $(item).attr("data-hardcoded", "true");
  } else {
    hardCodedTitle = "Not categorized";
    $(item).attr("title", hardCodedTitle);
    $(item).attr("data-hardcoded", "true");
  }

});

function populateTitle(e) {
  if (e.currentTarget.hasAttribute("data-hardcoded")) {
    $("#populateTilte").val(e.currentTarget.getAttribute("title"));
  } else {
    $("#populateTilte").val("");

  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="ui mini vertical menu" id="verticalMenu">
  <a class="UserSelectedItems" title="A-1" onclick="populateTitle(event)">A-1</a>
  <a class="UserSelectedItems" title="A-2" onclick="populateTitle(event)">A-2</a>
  <a class="UserSelectedItems" title="B-1" onclick="populateTitle(event)">B-1</a>
  <a class="UserSelectedItems" title="B-2" onclick="populateTitle(event)">B-2</a>
  <a class="UserSelectedItems" title="D-2" onclick="populateTitle(event)">D-2</a>
  <a class="UserSelectedItems" title="D-5" onclick="populateTitle(event)">D-5</a>
  <a class="UserSelectedItems" title="E-2" onclick="populateTitle(event)">E-2</a>
</div>

<input type="text" id="populateTilte" placeholder="Hardcoded Title">

​