jquery点击一个隐藏的复选框
我正在尝试为网站制作滤镜。 我想删除可见的复选框（我得到那个工作），删除标签等，只留下背景色< - 这一切工作。 但现在我不知道如何使这些div的点击能够输入字段隐藏。 有没有办法解决这个问题在jQuery中？
这是我的代码：
function onDataReceived(data) {
$.each(data.colorInfo, function(key, colorInfo) {
var inputElement = $("input[name^=filter][value="+colorInfo.id+"]").css("display", "none");
var labelElement = $('label[for^=filter]').remove();
var div = inputElement.parent();
div.attr('class', 'myclass_'+colorInfo.id);
div.css("background-color", colorInfo.colorCode);
div.css("width", "15px");
div.css("height", "15px");
div.css("display", "inline-block");
div.css("marginLeft", "5px");
div.css("marginBottom", "5px");
//console.log(colorInfo);
});
}
$(document).ready(function () {
var url = 'myapi.json';
$.get(url, onDataReceived);
});
和HTML：
<div class="filter_3">
<input name="filter[]" value="152194" type="checkbox"/>
<label for="filter_152194">Rood</label>
</div>
<div class="filter_4">
<input name="filter[]" value="152196" type="checkbox"/>
<label for="filter_152196">Blauw</label>
</div>
<div class="filter_5">
<input name="filter[]" value="152198" type="checkbox"/>
<label for="filter_152198">Oranje</label>
</div>
假设一旦div被点击，就有一个函数被调用：
function onDataReceived(data) {
$.each(data.colorInfo, function(key, colorInfo) {
var inputElement = $("input[name^=filter] [value="+colorInfo.id+"]").css("display", "none");
var labelElement = $('label[for^=filter]').remove();
var div = inputElement.parent();
div.attr('class', 'myclass_'+colorInfo.id);
div.css("background-color", colorInfo.colorCode);
div.css("width", "15px");
div.css("height", "15px");
div.css("display", "inline-block");
div.css("marginLeft", "5px");
div.css("marginBottom", "5px");
/* Added Lines */
div.css("pointer-events", "auto"); //Just in case, but it's probably not necessary
div.css("cursor", "pointer"); //It's nice to have
div.on('click', function() { //This is a click event delgated to the div
// Whatever code is needed when div is clicked
});
//console.log(colorInfo);
});
}
$(document).ready(function () {
var url = 'myapi.json';
$.get(url, onDataReceived);
});