时间戳

首页 > 解决方案 > 使用javascript根据当前菜单项动态更新标题属性

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

问题描述

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 回答），它工作正常。现在额外的要求是我有一个文本类型的输入字段。如何在单击每个项目时填充标题（每个菜单项的硬编码标题）作为文本框值？

标签： javascripthtmlsemantic-uimenuitemtitle

解决方案

有一些基本错误，例如，

  1. 访问 时document.getElementsByClassName()，您需要传递类名。喜欢document.getElementsByClassName("UserSelectedItems");
  2. 如果您使用 $.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">

推荐阅读