我想通过数据属性而不是类来使用这个显示/隐藏函数,但是我很难正确地使用语法。
我知道它是这样的 $("li[data-color="+ this.value + "]").show();
但我无法得到它可以工作和/或修改功能以使其工作。
我正在使用该功能按各种属性(即颜色、产品类别、场合等)过滤服装,并且我在这里发布了一个简单示例的 fiddle :http://jsfiddle.net/chayacooper/WZpMh/4/
$('#filterOptions li a').click(function () {
var ourClass = $(this).attr('class');
$('#filterOptions li').removeClass('active');
$(this).parent().addClass('active');
if (ourClass == 'all') {
$('#content').find('.item').show();
} else {
$('#content').find('.item:not(.' + ourClass + ')').hide();
$('#content').find('.item.' + ourClass).show();
}
return false;
});
最佳答案
请参阅此 fiddle 的工作示例:http://jsfiddle.net/Cr2cY/
$(document).ready(function () {
$('#filterOptions li a').click(function () {
// fetch the class of the clicked item
var ourDataAttr = $(this).data('color');
// reset the active class on all the buttons
$('#filterOptions li').removeClass('active');
// update the active state on our clicked button
$(this).parent().addClass('active');
if (ourDataAttr == 'All') {
// show all our items
$('#content').find('.item').show();
} else {
// hide all elements that don't share ourClass
$('#content').find('.item:not([data-color="' + ourDataAttr + '"])').hide();
// show all elements that do share ourClass
$('#content').find('.item[data-color="' + ourDataAttr + '"]').show();
}
return false;
});
});
请注意,您在 fiddle 中将“all”与“All”进行比较,这将不匹配。
关于jquery - 修改此函数以按数据属性而不是按类显示/隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15582349/