0

当我使用复选框时，我试图使某些图像褪色，过滤器通过识别被选中的复选框并淡化适当的图像而留下想要的图像来工作

<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"/>

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

4

1 回答 1

0

我建议更改您的方法（主要是因为我不完全确定这£是在 aclass或 an中使用的有效符号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 小提琴演示。

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

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

$(selector).hide()

也可以使用以下方法实现：

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

参考：

于 2013-04-12T22:36:49.010 回答