为什么我不能通过javascript创建标签

Question

我正在尝试动态创建输入，它将用于根据颜色过滤产品。起初，我尝试创建静态复选框输入来过滤产品。这是有效的。现在我希望再次做同样的事情，只是这次我不想通过javascript动态创建它们。此外，我尝试创建一个显示颜色的标签，而不是简单的复选框输入，这样用户就可以点击那个而不是复选框。

但由于某种原因，我无法创建标签。也就是说，奇怪的是，它创建了第一个红色的，但没有创建蓝色和黄色的。

我试着研究了CSS，创建输入和标签的JS函数，以及许多其他东西。

$(document).ready(function() {
var $products = $('.grid-products'),
$variants = $('.grid-variants'),
$filters = $("#filters input[type='checkbox']"),
product_filter = new ProductFilterLevel2($products, $variants, $filters);
product_filter.init();
});
function ProductFilterLevel2(products, variants, filters) {
var _this = this;
this.init = function() {
this.addColorInputs();
this.filters = $("#filters input[type='checkbox']");

};
this.addColorInputs = function() {
var colors = ['red', 'blue', 'yellow'];;
var filterContainer = document.createElement("div");
filterContainer.className = "filter-attributes";
filterContainer.setAttribute("id", "colorFilter");
for (i = 0; i < colors.length; i++) {
var colorInput = document.createElement("INPUT");
colorInput.setAttribute("type", "checkbox");
colorInput.setAttribute("name", "colour");
var inputId = "input-" + colors[i];
colorInput.setAttribute("id", inputId);
colorInput.setAttribute("value", colors[i]);
filterContainer.appendChild(colorInput);
var label = document.createElement("label");
label.setAttribute("for", inputId);
var labelColor = document.createElement("div");
labelColor.setAttribute("id", ("color-" + colors[i]));
labelColor.className = "color-select";
label.appendChild(labelColor);
filterContainer.appendChild(label);
}
var mainFilter = document.getElementById("filters");
mainFilter.append(filterContainer);
}


}

#colorFilter {
display: flex;
justify-content: space-between;
}
#colorFilter input {
display: none;
}
#colorFilter label #color-red {
height: 30px;
width: 30px;
}
#colorFilter label:last-child {
margin-right: 0px;
}
#colorFilter input:checked+label {
border: 2px solid black;
}
#colorFilter .color-select {
height: 100%;
width: 100%;
}
#colorFilter label div#color-red {
background-color: red;
}
#colorFilter label div#color-blue {
background-color: blue;
}
#colorFilter label div#color-yellow {
background-color: yellow;
}

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div id='filters' class='sections'>
<div class='filter-attributes'>
<h4>Static filter - Working</h4>
<input type='checkbox' name='colour' id='red' value='red'>Red</input>
<input type='checkbox' name='colour' id='blue' value='blue'>Blue</input>
<input type='checkbox' name='colour' id='yellow' value='yellow'>Yellow</input>
</div>
<h4>Dynamic filter - not working</h4>
</div>

Answer 1

您只告诉您的红色滤色器有任何有效宽度

#colorFilter label #color-red {
height: 30px;
width: 30px;
}

其余的继承width: 100%，父元素的宽度为0(它是空的，所以默认情况下它没有宽度！(

通过将上面的更改为下面的，所有的工作都如我所怀疑的那样

#colorFilter label  {
height: 30px;
width: 30px;
}

旁白：我通过简单地检查chrome-dev工具中的元素就完成了以上所有内容。

实例：

$(document).ready(function() {
var $products = $('.grid-products'),
$variants = $('.grid-variants'),
$filters = $("#filters input[type='checkbox']"),
product_filter = new ProductFilterLevel2($products, $variants, $filters);
product_filter.init();
});
function ProductFilterLevel2(products, variants, filters) {
var _this = this;
this.init = function() {
this.products = products;
this.variants = variants;
this.addColorInputs();
this.filters = $("#filters input[type='checkbox']");
this.bindEvents();
};
this.addColorInputs = function() {
var colors = ['red', 'blue', 'yellow'];
// $("#filters").append("Some appended text.");
var filterContainer = document.createElement("div");
filterContainer.className = "filter-attributes";
filterContainer.setAttribute("id", "colorFilter");
for (i = 0; i < colors.length; i++) {
var colorInput = document.createElement("INPUT");
colorInput.setAttribute("type", "checkbox");
colorInput.setAttribute("name", "colour");
var inputId = "input-" + colors[i];
colorInput.setAttribute("id", inputId);
colorInput.setAttribute("value", colors[i]);
filterContainer.appendChild(colorInput);
var label = document.createElement("label");
label.setAttribute("for", inputId);
var labelColor = document.createElement("div");
labelColor.setAttribute("id", ("color-" + colors[i]));
labelColor.className = "color-select";
label.appendChild(labelColor);
filterContainer.appendChild(label);
}
var mainFilter = document.getElementById("filters");
mainFilter.append(filterContainer);
}

this.bindEvents = function() {
this.filters.click(this.filterGridProducts);
$('#none').click(this.removeAllFilters);
};
this.filterGridProducts = function() {
//hide all
_this.products.hide();
var filteredProducts = _this.variants;
//filter by colour, size, shape etc
var filterAttributes = $('.filter-attributes');
// for each attribute check the corresponding attribute filters selected
filterAttributes.each(function() {
var selectedFilters = $(this).find('input:checked');
// if selected filter by the attribute
if (selectedFilters.length) {
var selectedFiltersValues = [];
selectedFilters.each(function() {
var currentFilter = $(this);
selectedFiltersValues.push("[data-" + currentFilter.attr('name') + "='" + currentFilter.val() + "']");
});
filteredProducts = filteredProducts.filter(selectedFiltersValues.join(','));
}
});
filteredProducts.parent().show();
};
this.removeAllFilters = function() {
_this.filters.prop('checked', false);
_this.products.show();
}
}

.sections {
float: left;
display: inline-block;
padding: 5px;
margin: 10px;
}
ul {
list-style-type: none;
padding: 0;
}
.grid-products {
display: inline-block;
border: 1px black solid;
width: 100px;
height: 100px;
font-weight: bolder;
text-align: center;
padding-top: 5px;
vertical-align: top;
}
.grid-products span {
display: inline-block;
margin-top: 40px;
vertical-align: middle;
line-height: normal;
}
[data-colour='red'] {
background: red;
}
[data-colour='yellow'] {
background: yellow;
}
[data-colour='green'] {
background: green;
}
[data-colour='blue'] {
background: blue;
}
.grid-variants {
display: inline-block;
border: 1px solid black;
width: 100px;
margin: 2px;
}
.large-boxes {
width: 200px;
height: 200px;
text-align: center;
}
#colorFilter {
display: flex;
justify-content: space-between;
}
#colorFilter input {
display: none;
}
#colorFilter label {
height: 30px;
width: 30px;
}
#colorFilter label:last-child {
margin-right: 0px;
}
#colorFilter input:checked+label {
border: 2px solid black;
}
#colorFilter .color-select {
height: 100%;
width: 100%;
}
#colorFilter label div#color-red {
background-color: red;
}
#colorFilter label div#color-blue {
background-color: blue;
}
#colorFilter label div#color-yellow {
background-color: yellow;
}

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div id='filters' class='sections'>
<div class='filter-attributes'>
<h4>Static filter - Working</h4>
<input type='checkbox' name='colour' id='red' value='red'>Red</input>
<input type='checkbox' name='colour' id='blue' value='blue'>Blue</input>
<input type='checkbox' name='colour' id='yellow' value='yellow'>Yellow</input>
</div>
<h4>Dynamic filter - not working</h4>
</div>
<div class='sections'>
<ul>
<li class='grid-products large-boxes'>
<h4>Product 1</h4>
<div class='grid-variants' data-colour='red' data-size='large'>L</div>
<div class='grid-variants' data-colour='red' data-size='small'>S</div>
</li>
<li class='grid-products large-boxes'>
<h4>Product 2</h4>
<div class='grid-variants' data-colour='red' data-size='medium'>M</div>
<div class='grid-variants' data-colour='blue' data-size='small'>S</div>
<div class='grid-variants' data-colour='green' data-size='large'>L</div>
</li>
<li class='grid-products large-boxes'>
<h4>Product 3</h4>
<div class='grid-variants' data-colour='yellow' data-size='medium'>M</div>
<div class='grid-variants' data-colour='blue' data-size='large'>L</div>
<div class='grid-variants' data-colour='yellow' data-size='large'>L</div>
<div class='grid-variants' data-colour='green' data-size='medium'>M</div>
</li>
<li class='grid-products large-boxes'>
<h4>Product 4</h4>
<div class='grid-variants' data-colour='blue' data-size='medium'>M</div>
<div class='grid-variants' data-colour='blue' data-size='large'>L</div>
<div class='grid-variants' data-colour='red' data-size='small'>S</div>
<div class='grid-variants' data-colour='green' data-size='medium'>M</div>
<div class='grid-variants' data-colour='green' data-size='small'>S</div>
</li>
</ul>
</div>