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

如何解决在wordpress中使用javascript隐藏包含特定文本的li

我正在尝试使用 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 片段（如果有帮助）：

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

解决方法

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

设法解决了问题，感谢@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/”页面时，包含“-”或“--”的子类别不会显示。

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

如何解决在wordpress中使用javascript隐藏包含特定文本的li

解决方法

相关推荐