Question

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

＆＃13;

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.");
      }
    });

＆＃13;

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

＆＃13;

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

我在这里缺少什么？

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

Answer 1

如果要将JavaScript语法与innerHTML或innerText一起使用，则需要使用[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>

希望它有所帮助。

Answer 2

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

如果要保存数组，请执行以下操作：

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

当你想要获得数组时：

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

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

2 个答案: