来自 HTML 属性的 Javascript 数组未按预期执行功能

Question

我试图从语言选择菜单中隐藏不需要的语言。相关HTML代码如下：

jQuery('.subnav-item').each(function() {
      var language = jQuery(this).innerHTML;
      var index = $('#customlanguagemenu').data('customlanguages');
      if (index.includes(language)) {
        jQuery(this).css({'display':'block','fontWeight':'bold','fontSize':'13px'});
      } else {
        jQuery(this).css('display', 'none');
        console.log(this + "This language was removed.");
      }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li role="menuitem" class="subnav-item" tabindex="-1" data-selected>
    <a class="submenu-link" tabindex="-1" >English</a>
</li>
<li role="menuitem" class="subnav-item" tabindex="-1" >
    <a title="Deutsch" href="/eds/Toolbar/ChangeLanguage?sid=37f38cff-e78a-44ca-9522-8d27966a321@sessionmgr103&amp;vid=0&amp;theDb=de&amp;theContentType=de" class="submenu-link" tabindex="-1" >Deutsch</a>
</li>
<li role="menuitem" class="subnav-item" tabindex="-1" >
    <a title="Espa&#241;ol" href="/eds/Toolbar/ChangeLanguage?sid=37f38cff-e78a-44ca-9522-98d27966a321@sessionmgr103&amp;vid=0&amp;theDb=es&amp;theContentType=es" class="submenu-link" tabindex="-1" >Espa&#241;ol</a>
</li>
<li role="menuitem" class="subnav-item" tabindex="-1" >
    <a title="Ελληνικά" href="/eds/Toolbar/ChangeLanguage?sid=37f38cff-e78a-44ca-9522-98d27966a321@sessionmgr103&amp;vid=0&amp;theDb=el&amp;theContentType=el" class="submenu-link" tabindex="-1" >Русский</a>
</li>

<script id="customlanguagemenu" type="text/javascript" src="javascript.js" data-customlanguages='["English","Русский"]'></script>

我可以看到代码已执行，但所有语言都在消失，而不仅仅是在 data-customlanguages 属性中选择的语言。

我在这里错过了什么？

我之前尝试使用 .text() 而不是 innerHTML，但它并没有改变结果。我还尝试将 display:none 应用于 a 元素而不是 li 元素（因为 innerHTML 实际上位于 a 元素中）但结果仍然没有改变。

Answer 1

我认为问题在于 data-customlanguages 中的值是字符串，而不是数组。如果您需要像这样在 HTML 元素中存储一个数组，您应该改为使用 JSON.stringify 和 JSON.parse 来保存和获取数据。

当你想保存数组时，做这样的事情：

$("#elem").data("customAttr") = JSON.stringify(varArray);

想获取数组时：

let myArray = JSON.parse($("#elem").data("customAttr"));

Answer 2

如果您想将 JavaScript 语法与 innerHTML 或 innerText 一起使用，您需要在 return 之前使用 [0] 匹配项元素（而不是集合）。
在您的情况下，您需要使用 innerText，因为它不会在您的数组中找到其 HTML 的整个元素。

如果您想使用 jQuery 语法，您也可以使用 .find('a') 和 .text()。

查看这个工作片段，我只修改了一行：

jQuery('.subnav-item').each(function() {
  var language = $(this).find('a').text(); // TAKIT: Modified only here
  var index = $('#customlanguagemenu').data('customlanguages');
  if (index.includes(language)) {
    jQuery(this).css({
      'display': 'block',
      'fontWeight': 'bold',
      'fontSize': '13px'
    });
  } else {
    jQuery(this).css('display', 'none');
    console.log(language, "language was removed."); // TAKIT: And a little here, but that's consoling…
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li role="menuitem" class="subnav-item" tabindex="-1" data-selected>
  <a class="submenu-link" tabindex="-1">English</a>
</li>
<li role="menuitem" class="subnav-item" tabindex="-1">
  <a title="Deutsch" href="/eds/Toolbar/ChangeLanguage?sid=37f38cff-e78a-44ca-9522-8d27966a321@sessionmgr103&amp;vid=0&amp;theDb=de&amp;theContentType=de" class="submenu-link" tabindex="-1">Deutsch</a>
</li>
<li role="menuitem" class="subnav-item" tabindex="-1">
  <a title="Espa&#241;ol" href="/eds/Toolbar/ChangeLanguage?sid=37f38cff-e78a-44ca-9522-98d27966a321@sessionmgr103&amp;vid=0&amp;theDb=es&amp;theContentType=es" class="submenu-link" tabindex="-1">Espa&#241;ol</a>
</li>
<li role="menuitem" class="subnav-item" tabindex="-1">
  <a title="Ελληνικά" href="/eds/Toolbar/ChangeLanguage?sid=37f38cff-e78a-44ca-9522-98d27966a321@sessionmgr103&amp;vid=0&amp;theDb=el&amp;theContentType=el" class="submenu-link" tabindex="-1">Русский</a>
</li>

<script id="customlanguagemenu" type="text/javascript" src="javascript.js" data-customlanguages='["English","Русский"]'></script>

⋅ ⋅ ⋅

在下面的代码片段中，我做了以下修改：

添加了一些 CSS 以简化 JS 代码
如果条件为真，则使用 .addClass

var customlanguages = $('#customlanguagemenu').data('customlanguages');
jQuery('.subnav-item').each(function(i, elm) {
  var language = $(elm).find('a').text();
  if (customlanguages.includes(language))
    $(elm).addClass('subnav-displayed');
});

.subnav-item {
  display: none;
  font-weight: bold;
  font-size: 13px;
}

.subnav-displayed {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li role="menuitem" class="subnav-item" tabindex="-1" data-selected>
  <a class="submenu-link" tabindex="-1">English</a>
</li>
<li role="menuitem" class="subnav-item" tabindex="-1">
  <a title="Deutsch" href="/eds/Toolbar/ChangeLanguage?sid=37f38cff-e78a-44ca-9522-8d27966a321@sessionmgr103&amp;vid=0&amp;theDb=de&amp;theContentType=de" class="submenu-link" tabindex="-1">Deutsch</a>
</li>
<li role="menuitem" class="subnav-item" tabindex="-1">
  <a title="Espa&#241;ol" href="/eds/Toolbar/ChangeLanguage?sid=37f38cff-e78a-44ca-9522-98d27966a321@sessionmgr103&amp;vid=0&amp;theDb=es&amp;theContentType=es" class="submenu-link" tabindex="-1">Espa&#241;ol</a>
</li>
<li role="menuitem" class="subnav-item" tabindex="-1">
  <a title="Ελληνικά" href="/eds/Toolbar/ChangeLanguage?sid=37f38cff-e78a-44ca-9522-98d27966a321@sessionmgr103&amp;vid=0&amp;theDb=el&amp;theContentType=el" class="submenu-link" tabindex="-1">Русский</a>
</li>

<script id="customlanguagemenu" type="text/javascript" src="javascript.js" data-customlanguages='["English","Русский"]'></script>

希望对您有所帮助。

来自 HTML 属性的 Javascript 数组未按预期执行功能

Javascript array from HTML attribute not executing function as expected

javascript

jquery

html

arrays

custom-data-attribute