Question

当我使用复选框时，我试图使某些图像褪色，过滤器的工作原理是识别正在检查的复选框并淡化相应的图像，留下想要的图像

<script  type="text/javascript">

$("#filter-category£5-10").click(function() {
    if (!$(this).attr('checked'))
        $('.category£11-15bag').stop().fadeTo('slow', 1.0);
    else
        $('.category£11-15bag').stop().fadeTo('slow', 0.2);

});

$("#filter-category£11-15").click(function() {
    if (!$(this).attr('checked'))
        $('.category£5-10bag').stop().fadeTo('slow', 1.0);
    else
        $('.category£5-10bag').stop().fadeTo('slow', 0.2);

});
</script>

这是我创建的类的样式：

.category£5-10bag{width:100px; height:100}
.category£11-15bag{width:100px; height:100}

这些是班级的图像：

<img src="picture box image.png" style = "position:relative; top:-1050px; right:-42"  class="category£5-10bag"/>

<img src="picture box image.png" style = "position:relative; top:-1050px; right:-42"  class="category£11-15bag"/>

请告诉我，如果您发现任何问题，当我尝试使用它时根本没有任何事情发生

Answer 1

我建议更改您的方法（主要是因为我不完全确定£是在class或id中使用的有效符号，并且使用以下方法：

HTML：

<input type="checkbox" class="category" id="five-to-ten" />
<label for="five-to-ten">£5-10</label>
<input type="checkbox" class="category" id="eleven-to-fifteen" />
<label for="eleven-to-fifteen">£11-15</label>


<!-- the images are, of course, generic place-holders -->
<img src="http://lorempixel.com/100/100/nature" data-price="five-to-ten" />    
<img src="http://lorempixel.com/100/100/nightlife" data-price="eleven-to-fifteen" />

jQuery的：

$('img').hide();
$('input.category').change(
    function(){
        var test = this.checked;
        $('img[data-price="' + this.id + '"]')[test ? 'show' : 'hide']();
    });

JS Fiddle demo

这有一些好处，因为它本身具有更高的可扩展性，并且不需要每个复选框的新点击处理程序，它使用data-*自定义属性来包含价格category（等于相关复选框的id属性）。

使用三元运算符（test ? 'show' : 'hide'）来调用show()或hide()方法，具体取决于是否选中了复选框;并利用以下事实：

$(selector).hide()

也可以使用

实现

$(selector)['hide']();

参考文献：

attribute-equals ([attribute="value"]) selector。
change()。
hide()。

Javascript过滤图像取决于类

1 个答案:

HTML：

jQuery的：