JavaScript中生成的按钮不是'；他没有出现

我试图添加一个搜索过滤器，以按“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);
    });

});

$（函数（）{
var$imgs=$（“人员img”）；
var$按钮=$（“#按钮”）；
var={}；
$imgs.每个（函数（）{
var属性=$（此）.data（“质量”）；
如果（属性）{
properties.split（“，”）.forEach（函数（质量）{
if（质量[质量]==null）{
质量[质量]=[]；
}
质量[质量].推力（p）；
});
}
});
$("", {
文本：“全部”，
课堂：“开”，
单击：函数（）{
$（this.addClass（“on”）.sides（）.removeClass（“on”）；
$imgs.show（）；
}
}).附于（$按钮）；
$。每个（质量、功能（质量）{
$("", {
文本：质量+“（“+质量[质量].长度+”），
单击：函数（）{
$（this.addClass（“on”）.sides（）.removeClass（“on”）；
$imgs.hide（）.filter（质量[质量]）.show（）；
}
}).附于（$按钮）；
});
});

下面是一个JSFIDLE：

我不知道为什么其中一个按钮会出现，但其他按钮不会出现

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

这里什么也没有发生，因为您在

div#people

中的元素不是

img

，而是

p

qualities[quality].push(p);

修复后，这就不起作用了——您的意思是将元素作为

p

传递给这个匿名函数

固定版本：

两个问题：

• $img

  选择器不正确。它应该是

  #people>p

  ，而不是

  #people img

• 变量

  p

  未定义。将其定义为

  var p=this

更正

或者这个片段：

$（函数（）{
var$imgs=$（“#人>人”）；
var$按钮=$（“#按钮”）；
var={}；
$imgs.每个（函数（）{
var p=这个；
var属性=$（此）.data（“质量”）；
如果（属性）{
properties.split（“，”）.forEach（函数（质量）{
if（质量[质量]==null）{
质量[质量]=[]；
}
质量[质量].推力（p）；
});
}
});
//出现此按钮。
$("", {
文本：“全部”，
课堂：“开”，
单击：函数（）{
$（this.addClass（“on”）.sides（）.removeClass（“on”）；
$imgs.show（）；
}
}).附于（$按钮）；
//这些按钮不会出现。
//应该为每种不同的标签生成一个按钮。
$。每个（质量、功能（质量）{
$("", {
文本：质量+“（“+质量[质量].长度+”），
单击：函数（）{
$（this.addClass（“on”）.sides（）.removeClass（“on”）；
$imgs.hide（）.filter（质量[质量]）.show（）；
}
}).附于（$按钮）；
});
});
正文{
字体系列：Arial、Helvetica、无衬线字体；
}
p{
文本对齐：居中；
字体大小：20px；
字体系列：Arial、Helvetica、无衬线字体；
显示：内联块；
边框：实心；
宽度：80px；
利润率：30像素；
背景颜色：米色；
}
#人{
文本对齐：居中；
保证金：自动；
宽度：300px；
背景色：#C3A780；
}


约翰

约旦
赛斯

Sam
Tejas
伙伴
Jason
您的阵列声明不正确。需要使用[]，而不是{}。它不会加载其他按钮，因为“质量”是未定义的，所以它不会进入每个循环。var={}；应为var qualities=[]@Mathyou根据您的html，没有要循环的图像，因此不会创建任何按钮，因为您的qualities对象为空。请在堆栈溢出上的问题本身中包含所有相关的html、CSS和JavaScript。不要只是链接到它。如果该网站被某人的公司防火墙阻止，或者只是关闭了，这个问题就没有意义了。谢谢！我不知道为什么我用img标签代替p。谢谢你的帮助！此解决方案存在一个问题：单击该小提琴中的按钮总是隐藏所有元素。