Question

我试图添加一个搜索过滤器，按照＆＃34;数据 - ＆＃34;对我的HTML元素进行排序标签，但我试图从JavaScript生成的一些按钮根本没有出现。

$(function() {
    var $imgs = $("#people img");
    var $buttons = $("#buttons");
    var qualities = {};

    $imgs.each(function() {
        var properties = $(this).data("qualities");

        if (properties) {
            properties.split(",").forEach(function(quality) {
                if (qualities[quality] == null) {
                    qualities[quality] = [];
                }
                qualities[quality].push(p);
            });
        }
    });

    $("<button/>", {
        text: "All",
        class: "on",
        click: function() {
            $(this).addClass("on").siblings().removeClass("on");
            $imgs.show();
        }
    }).appendTo($buttons);

    $.each(qualities, function(quality) {
        $("<button/>", {
            text: quality + " (" + qualities[quality].length + ")",
            click: function() {
                $(this).addClass("on").siblings().removeClass("on");
                $imgs.hide().filter(qualities[quality]).show();
            }
        }).appendTo($buttons);
    });

});

这是一个JSFiddle：https://jsfiddle.net/1pxp3j9t/

我不确定为什么其中一个按钮显示但其他按钮不显示。

Answer 1

var $imgs = $("#people img");

此处没有任何结果，因为div#people中的元素不是img，而是p。

qualities[quality].push(p);

修复后，这不起作用 - 您打算将元素作为p传递给此匿名函数。

修正版：https://jsfiddle.net/xock2ztw/1/

Answer 2

两个问题：

$img选择器不正确。它应该是#people>p而不是#people img。
未定义变量p。将其定义为var p = this

更正了fiddle。

或者这个片段：

$(function() {
    var $imgs = $("#people>p");
    var $buttons = $("#buttons");
    var qualities = {};

    $imgs.each(function() {
    var p = this;
        var properties = $(this).data("qualities");

        if (properties) {
            properties.split(",").forEach(function(quality) {
                if (qualities[quality] == null) {
                    qualities[quality] = [];
                }
                qualities[quality].push(p);
            });
        }
    });

//This button appears.
    $("<button/>", {
        text: "All",
        class: "on",
        click: function() {
            $(this).addClass("on").siblings().removeClass("on");
            $imgs.show();
        }
    }).appendTo($buttons);

//These buttons do not appear.
//There is supposed to generate a button for every different kind of tag.
    $.each(qualities, function(quality) {
        $("<button/>", {
            text: quality + " (" + qualities[quality].length + ")",
            click: function() {
                $(this).addClass("on").siblings().removeClass("on");
                $imgs.hide().filter(qualities[quality]).show();
            }
        }).appendTo($buttons);
    });

});

body {
    font-family: Arial, Helvetica, sans-serif;
}

p {
    text-align: center;

    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;

    display: inline-block;

    border: solid;
    width: 80px;

    margin: 30px;

    background-color: beige;
}

#people {
    text-align: center;
    margin: auto;

    width: 300px;
    background-color: #C3A780;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="buttons"></div>
<div id="people">
<!-- Tags: Fast, Strong, Attractive, Ugly, Weak -->
  <p data-qualities="Fast, Strong, Attractive">Matthew</p>
  <p data-qualities="Ugly"> John</p>
  <p data-qualities="Weak, Ugly"> Jordan</p>
  <p data-qualities="Weak"> Seth</p>
  <p data-qualities="Strong"> Sam</p>
  <p data-qualities="Attractive, Fast">Tejas</p>
  <p data-qualities="Fast, Strong"> Buddy</p>
  <p data-qualities="Ugly, Weak, Strong, Fast"> Jason</p>
</div>

JavaScript中生成的按钮不会显示出来

2 个答案: