使用 javascript 基于当前菜单项动态更新标题属性

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.

根据每个动态菜单项填充 hard-coded 标题

以上是展示我的场景的示例代码（不是有效的确切代码）。首先根据用户选择，填充菜单项（很少有可能未选中）。所以我的要求是根据用户选择的菜单项将硬编码值显示为标题。

如果用户选择项目：B-1、B-2、D-5，则硬编码标题必须在悬停每个菜单项时显示为 pop-up。

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

我的实际 html 代码看起来有点像上面那样。谢谢！

第二次编辑... 我使用了下面的代码（由@rucha 回答）并且工作正常。现在额外的要求是我有一个文本类型的输入字段。如何在单击每个项目时填充标题（hard-coded 每个菜单项的标题）作为文本框值？

Answer 1

有一些基本错误，例如，

访问document.getElementsByClassName()时，需要传递class名称。喜欢document.getElementsByClassName("UserSelectedItems");
如果您正在使用 $.each，则无需为同一目的再次使用 for 循环。

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

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">

使用 javascript 基于当前菜单项动态更新标题属性

Dynamically update title property based on current menu item using javascript

javascript

html

semantic-ui

menuitem

title

使用 javascript 基于当前菜单项动态更新标题 属性

Dynamically update title property based on current menu item using javascript

javascript

html

semantic-ui

menuitem

title

使用 javascript 基于当前菜单项动态更新标题属性