JavaScript 中生成的按钮不显示答案

【问题标题】：Buttons generated in JavaScript aren't showing upJavaScript 中生成的按钮不显示
【发布时间】：2017-07-14 21:36:25
【问题描述】：

我正在尝试添加一个搜索过滤器以按“data-”标签对我的 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/

我不确定为什么其中一个按钮会显示，而其他按钮却没有。

【问题讨论】：

您错误地声明了您的数组。需要使用 [ ]，而不是 {}。它没有加载其他按钮，因为“质量”是未定义的，所以它永远不会进入你的每个循环。变量质量 = {};应该是 var quality = [];
@Mathyou 根据您的 html，没有要循环的图像，因此不会创建按钮，因为您的质量对象是空的。
请在问题本身中包含所有相关的 HTML、CSS 和 JavaScript，在 Stack Overflow 上。不要只链接到它。如果该站点被某人的公司防火墙阻止，或者只是关闭，那么这个问题就没有意义了。

标签： javascript jquery html arrays object

【解决方案1】：

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

这里什么都没有发生，因为div#people 中的元素不是img，而是p。

qualities[quality].push(p);

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

固定版本：https://jsfiddle.net/xock2ztw/1/

【讨论】：

谢谢！我不知道为什么我使用 img 标签而不是 p。感谢您的帮助！
此解决方案存在一个问题：单击该小提琴中的按钮始终会隐藏所有元素。

【解决方案2】：

两个问题：

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

已更正fiddle。

或者这个sn-p：

$(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>

【讨论】：