在wordpress中使用javascript隐藏包含特定文本的li答案

【问题标题】：Hide li that contains specific text with javascript in wordpress在wordpress中使用javascript隐藏包含特定文本的li
【发布时间】：2021-06-18 17:49:55
【问题描述】：

我正在尝试使用 javascript 通过特定文本在 wordpress 的搜索下拉菜单中隐藏子类别。到目前为止没有运气。我不是程序员，所以我会感谢您提供指导或修复脚本的帮助。当我检查页面时，菜单 html 看起来有点像这样（我已经缩小了范围）：

<ul>
<li>
<select class="default-select select2-hidden-accessible" name="categories" tabindex="-1" aria-hidden="true">
<option value=""> choose category </option>
<option value="119">Customer Support</option>
<option value="163">Hosting</option>
<option value="181"> - Link Building</option>
</li>
</ul>

当我检查选项时，我得到了这个：

    <span class="select2-results">
    <ul class="select2-results__options" role="tree" id="select2-categories-85-results" aria-expanded="true" aria-hidden="false">
    <li class="select2-results__option" role="treeitem" aria-selected="false"> choose category </li>
    <li class="select2-results__option" id="select2-categories-85-result-5nsl-119" role="treeitem" aria-selected="false">Customer Support</li>
    <li class="select2-results__option" id="select2-categories-85-result-td3l-163" role="treeitem" aria-selected="false">Hosting</li>
    <li class="select2-results__option" id="select2-categories-85-result-c6bv-181" role="treeitem" aria-selected="false"> - Link Building</li>
    </ul></span>

我试图隐藏每个包含字符“-”或“--”的 li。所以经过大量搜索后，我发现了这个 javascript：

let lis = document.getElementsByTagName('li');

for (let x = 0; x < lis.length; x++) {
    let li = lis[x];
    let content = li.textContent;
  
    if (content.indexOf('-') !== -1 || content.indexOf('--') !== -1) {
    li.style.display = 'none';
  }
}

问题是当我使用它时，类别菜单完全消失了，类别菜单 html 代码如下所示：

<ul>
<li style="display: none;">
<select class="default-select select2-hidden-accessible" name="categories" tabindex="-1" aria-hidden="true">
<option value=""> choose category </option>
<option value="119">Customer Support</option>
<option value="163">Hosting</option>
<option value="181"> - Link Building</option>
</li>
</ul>

我尝试过使用“getElementsByClassName('select2-results__option')”，但它完全没有任何作用，例如菜单及其内容不受影响。我怎样才能解决这个问题？感谢您的帮助。

编辑：搜索部分的 HTML PHP sn-p 如果有帮助：

<ul>
<li>
<div class="form-group">
<input type="text" placeholder="<?php echo __( 'What are you looking for?', 'exertio_theme' ); ?>" class="form-control" name="title" value="<?php echo esc_attr($title_value); ?>">
</div>
</li>
<li>
<select class="default-select" name="categories">
<option value=""> <?php echo __( 'Select Category', 'exertio_theme' ); ?> </option>
<?php echo get_hierarchical_terms('service-categories','', $cat_value ); ?>
</select>
</li>
<li> <button type="submit" class="btn btn-style btn-block"><?php echo __( 'Search', 'exertio_theme' ); ?></button> </li>
</ul>

此外，当我使用以下 css 在下拉菜单中隐藏特定的 li 时，它可以工作（如果有帮助的话）：

.select2-results__options > li:nth-child(2) { display: none; }

【问题讨论】：

标签： javascript html wordpress html-lists hide

【解决方案1】：

您的 HTML 存在一些语法错误。你错过了</select>，我解决了这个问题。由于您有不同的 html 源，我不确定您使用的是哪一个。我只取第一个html源码。

我更新了你的 js 文件和下面的例子：

const options = document.querySelectorAll("option");

for (let i = 0; i < options.length; i++) {
  const content = options[i].textContent;
  if (content.indexOf("-") !== -1 || content.indexOf("--") !== -1) {
    options[i].style.display = "none";
  }
}

document
  .querySelector("select[name='categories']")
  .addEventListener("change", function () {
    const lis = document.querySelectorAll("span.select2-results li");

    for (let i = 0; i < lis.length; i++) {
      const content = lis[i].textContent;
      if (content.indexOf("-") !== -1 || content.indexOf("--") !== -1) {
        lis[i].style.display = "none";
      }
    }
  });

<div>
  <ul>
    <li>
      <select
        class="default-select select2-hidden-accessible"
        name="categories"
        tabindex="-1"
        aria-hidden="true"
      >
        <option value="">choose category</option>
        <option value="119">Customer Support</option>
        <option value="163">Hosting</option>
        <option value="181">- Link Building</option>
      </select>
    </li>
  </ul>
</div>
<div>
  <span class="select2-results">
    <ul
      class="select2-results__options"
      role="tree"
      id="select2-categories-85-results"
      aria-expanded="true"
      aria-hidden="false"
    >
      <li class="select2-results__option" role="treeitem" aria-selected="false">
        choose category
      </li>
      <li
        class="select2-results__option"
        id="select2-categories-85-result-5nsl-119"
        role="treeitem"
        aria-selected="false"
      >
        Customer Support
      </li>
      <li
        class="select2-results__option"
        id="select2-categories-85-result-td3l-163"
        role="treeitem"
        aria-selected="false"
      >
        Hosting
      </li>
      <li
        class="select2-results__option"
        id="select2-categories-85-result-c6bv-181"
        role="treeitem"
        aria-selected="false"
      >
        - Link Building
      </li>
    </ul></span
  >
</div>

【讨论】：

嘿！非常感谢，但不幸的是它没有效果。当我检查时，我可以在 html 页面上看到脚本，我做错了什么？如果您可以检查一下，我还在帖子末尾用 html-php sn-p 更新了我的问题。非常感谢。
@alexnusinov，我尝试更新我的答案。我希望它现在有效。我实际上很困惑，因为您有两个具有不同选项结构的 HTML。一种是列出li 元素中的项目。一个是option元素中的列表
首先，谢谢。哇，好的，有些东西正在使用您更新的脚本，现在当我检查 html 中的页面时，所有带有“-”和“--”文本的 option 子类别现在都包含 style="display: none;"，这正是我想要实现的，但我仍然在下拉菜单中看到这些子类别。我想这是因为你提到的有 2 个列表？我也对这个逻辑感到困惑（买了这个主题）。我尝试复制您的脚本并将option 更改为li 但这没有任何效果，您对li 列表有什么建议吗？再次感谢。
我明白为什么在我修改您的脚本时对li 列表没有影响。 li 菜单仅在选择下拉菜单时出现在 html 中，li 出现在页面的最后，就在 </body> 之前和脚本之后，因此它是动态的。我会继续努力解决这个问题，但我相信你的脚本可以完美运行，所以谢谢你，我真的很感谢你帮助我。祝你好运！
@alexnusinov，这对我来说是一个很好的提示。我更新了我的答案。我在 select 元素上添加了一个 addEventlistener。 whenever there is a change in the select element, it will hide the li which appears after you select an option.我希望它现在可以工作。

【解决方案2】：

设法解决了这个问题，感谢@ikhvjs 提供脚本并帮助我学到了很多东西。如果有人感兴趣，我会分享解决方案。

wordpress javascript 文件名：select2.full.min.js

为页面动态生成分类项的javascript如下：

    i.prototype.option=function(e){
    var t=document.createElement("li");
    t.className="select2-results__option";
    var n={role:"option","aria-selected":"false"},i=window.Element.prototype.matches||window.Element.prototype.msMatchesSelector||window.Element.prototype.webkitMatchesSelector;
    for(var r in(null!=e.element&&i.call(e.element,":disabled")||null==e.element&&e.disabled)&&(delete n["aria-selected"],n["aria-disabled"]="true"),null==e.id&&delete n["aria-selected"],null!=e._resultId&&(t.id=e._resultId),e.title&&(t.title=e.title),e.children&&(n.role="group",n["aria-label"]=e.text,delete n["aria-selected"]),n){
    var o=n[r];
    t.setAttribute(r,o)
    }
    if(e.children){
    var s=h(t),a=document.createElement("strong");
    a.className="select2-results__group";
    h(a);
    this.template(e,a);
    for(var l=[],c=0;c<e.children.length;c++){
    var u=e.children[c],d=this.option(u);
    l.push(d)
    }
    var p=h("<ul></ul>",{class:"select2-results__options select2-results__options--nested"});
    p.append(l),s.append(a),s.append(p)
    }
    else this.template(e,t);
    return f.StoreData(t,"data",e),t
    }

我只是在函数中的第一个变量声明之后添加了以下变量和 if 条件：

var content=e.text;if(window.location.href.indexOf("/services-search/")!=-1&&(content.indexOf("-")!==-1||content.indexOf("--")!==-1)){t.style.display="none";}

现在，当我在“/services-search/”页面中时，包含“-”或“--”的子类别不会显示。

【讨论】：