У меня есть куча изображений с атрибутами данных, как это:

<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 });
     }
 });

});

1
Begsde 31 Авг 2017 в 13:13

3 ответа

Лучший ответ

Для этого вы можете добавить атрибут data к элементам button, который соответствует data-filename на img. Затем вы можете использовать это для 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>
1
Rory McCrossan 31 Авг 2017 в 10:20
  1. использовать селектор атрибута с: не селектор

селектор атрибута

Описание: выбирает элементы, имеющие указанный атрибут, с любым значением.

: не селектор

Описание: Выбирает все элементы, которые не соответствуют данному селектору.

$('.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>
3
guradio 31 Авг 2017 в 10:20

Изменит ваш код немного:

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

Var self = $ (this); // это элемент, который вызвал событие, и вам нужно запомнить id из-за проверки. Когда вы пытаетесь проверить $ ('. Lbtn'). Attr ('src'), он берет все три кнопки и не работает И кнопки также должны иметь атрибут src!

0
lasha maraneli 31 Авг 2017 в 10:18