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 div的child 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仅用于测试目的，因此我可以看到脚本是否做了任何事情。现在，脚本由一个按钮触发，但是当它正在工作时，我会将它绑定到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();
});

Answer 2

我建议为每个持有特定值的.child div添加数据属性：

<div class="child" data-value="valueX">valueX</div>

然后，调用以下函数：

function filter() {
    var val = $('#select').val();
    var parents = $('.parent');
    // Hide all parents
    parents.hide();
    // Show paents that contain the specific value
    parents.find('child').filter('[data-value="' + val + '"]').closest('.parent').show();
}

更好的是将数据属性添加到.parent元素：

<div class="parent" data-value="valueX">

并使用此功能：

function filter() {
    var val = $('#select').val();
    var parents = $('.parent');
    // Hide all parents
    parents.hide();
    // Show paents that contain the specific value
    parents.filter('[data-value="' + val + '"]').show();
}

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

2 个答案: