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

アプローチを変更することをお勧めします（主に、 aまたは anで£使用する有効なシンボルであると完全に確信していないため、次のアプローチを使用します。classid

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()hide()

$(selector).hide()

以下を使用して実装することもできます。

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

参考文献:

于 2013-04-12T22:36:49.010 に答える