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

如果我按一下按鈕染紅了這也沒有包含數據的文件名的紅色作品應該具有0

不透明到目前爲止，我這樣做，但它不會工作：

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

}）;

Answer 1

要做到這一點，你可以在data屬性添加到其上img的data-filename匹配button元素。然後，您可以用它來filter()他們和顯示/隱藏相關的，是這樣的：

$('.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 }); 
    } 
}); 

變種自我= $（本）; //這是元素，它觸發了事件，並且由於檢查而需要記住ID。當你試圖檢查$（'。lbtn'）。attr（'src'）它需要全部三個按鈕並且不起作用 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>