jQueryの各クラス項目と

Question

を比較し、私はデータと画像の束を持っているが、このように属性：

<img class="overlay" data-filename="red" src="img1.png"> 
<img class="overlay" data-filename="yellow" src="img2.png"> 
<img data-filename="blue" src="img3.png"> 

したがって、私はこのようなボタンがあります：

<button class="lbtn" style="background-Color:red"> 
<button class="lbtn" style="background-Color:yellow"> 
<button class="lbtn" style="background-Color:blue"> 

私はボタンをクリック赤くした場合

012：ノーデータ・ファイル名の赤が含まれていない画像は、これまでのところ、私はこれをしなかったが、それ文句を言わない仕事0

の不透明度を持たなければなりません

}）;

Answer 1

あなたはimgにdata-filenameに一致するbutton要素にdata属性を追加することができ、これを達成するために。

$('.lbtn').click(function() { 
 
    var filter = $(this).data('filter'); 
 
    var $imgs = $('.container img').hide(); 
 
    $imgs.filter('[data-filename="' + filter + '"]').show(); 
 
});

.red { background-color: #C00; } 
 
.yellow { background-color: #CC0; } 
 
.blue { background-color: #00C; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <img class="overlay" data-filename="red" src="img1.png" title="red"> 
 
    <img class="overlay" data-filename="yellow" src="img2.png" title="yellow"> 
 
    <img data-filename="blue" src="img3.png" title="blue"> 
 
</div> 
 

 
<button class="lbtn red" data-filter="red">Red</button> 
 
<button class="lbtn yellow" data-filter="yellow">Yellow</button> 
 
<button class="lbtn blue" data-filter="blue">Blue</button>

Answer 2

はあなたのコードを少し変更します

$('.lbtn').click(function() { 
var self= $(this); 
$(".overlay").each(function() { 
    if($(this).data('filename') == $(self).attr('src') { 
     $(this).css({ opacity: 0 }); 
    } 
}); 

するvar自己= $（この）。 //これはイベントを発生させた要素で、チェックのためにIDを覚えておく必要があります。 $（ '。lbtn'）。attr（ 'src'）をチェックしようとすると、3つのボタンがすべてかかり、動作しません。 ANDボタンにもsrc属性が必要です！

Answer 3

1. 使用属性セレクタで：

attribute selector

説明セレクタない：任意の値で指定された属性を持つ要素を選択します。

:not selector

説明：指定されたセレクタに一致しないすべての要素を選択します。

$('.lbtn').click(function() { 
 
    var color = $(this).attr('style').split(":")[1] 
 
    console.log(color) 
 

 
    $('img:not([data-filename=' + color + '])').css({ 
 
    opacity: 0 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img class="overlay" data-filename="red" src="img1.png"> 
 
<img class="overlay" data-filename="yellow" src="img2.png"> 
 
<img data-filename="blue" src="img3.png"> 
 

 

 
<button class="lbtn" style="background-Color:red">Click</button> 
 
<button class="lbtn" style="background-Color:yellow">Click</button> 
 
<button class="lbtn" style="background-Color:blue">Click</button>