javascript - 使用 JS/jQuery 根据子 div 的内容使 div 不可见

Question

上下文

我有一个页面，其中填充了几个 <div>在用户通过先前的表单提交搜索后，通过解析 JSON 响应来填充这些内容。到目前为止，效果很好，生成的 html 大致如下所示:

<div class="parent">
    <p>some info</p>
    <img (relevant image)>
    <div class="child">value</div>
</div><!--/parent-->

<div class="parent">
    <p>some info</p>
    <img (relevant image)>
    <div class="child">value1</div>
</div><!--/parent-->

etc

此外，此页面还有一个select菜单，其选项也是通过解析 JSON 响应来填充的，并且此 select包含所有可能的(value)可以在这些 div 中找到。

<select id="select">
    <option>value</option>
    <option>value1</option>
    <option>value2</option>
         etc...
</select>

值得一提的是，一些 div 使用相同的 value ，所以任何给定的value可能会在页面上出现多次，或者可能根本不出现，但任何 div class="child"只能保存 1 个值。

目标

我想要实现的是一种过滤器，用户可以在 select 中选择一个选项。菜单。然后，只有parent具有 child 的 div包含该特定值的 div 保持可见，其余部分必须消失。

这是我想出的脚本:

function filter() {
    var child = document.getElementsByClassName("child"),
        i, len;
    var select = document.getElementById("select");
    var filter = select.options[select.selectedIndex].text;
    for (i = 0, len = child.length; i < len; i++) {
        if (child[i].innerHTML != filter) {
            $(this).closest("div.parent").css("display", "none");
        } else {
            alert("failure")
        }
    })
};

alert仅用于测试目的，因此我可以查看脚本是否执行任何操作。目前，该脚本由按钮触发，但当它运行时，我会将其绑定(bind)到 select菜单以使其在用户选择选项时自动触发。

但是，这似乎不起作用。 Chrome 控制台和 Firefox 开发工具都没有给出错误。我只是收到警报，这意味着脚本认为 var filter 的内容与 child.innerhtml 相同。尽管这对于 var child 的某些实例有效。 ，它并非对所有实例都有效。

我不确定为什么这不起作用。我也尝试更换 closest()与 parent() ，我尝试替换 css(..)通过addClass()但没有效果。

我认为自己在 JS 和 JQuery 方面都是新手，所以我可能会错过一些明显的东西，但我已经使用 Google、SO、MDN、JQuery 文档以及我能想到的所有其他与编程相关的网站广泛寻找答案(甚至是 W3schools)。经过 6 个多小时的搜索和尝试解决方案后，我完全不知所措。我在这里缺少什么？

Answer 1

您的实现问题是 this 的使用，它没有引用您想要隐藏的元素。

你可以试试

$(child[i]).closest("div.parent").css("display", "none");

而不是

$(this).closest("div.parent").css("display", "none");

<小时/>

您可以使用.filter()定位要显示的 div

$("select").on('change', function filter() { 
    //Get selected value
    var selected = $(this).val();

    var parents = $("div.parent");
    //Hide All
    parents.hide();

    //Use filter() to target the divs you want to show
    parents.filter(function(){
        return $(this).find('div.child').text() === selected;
    }).show();
});