Как сделать чтобы весь конкретный блок стал серым при нажатии на кнопку?

Question

[Im p3l]

Есть несколько одинаковых блоков. Как сделать, чтобы при нажатии на кнопку весь конкретный блок, включая саму кнопку, текст и картинку, становился серым?

<div class="block">
    <img src="pic1" alt="">
    <button class="button">Button</button>
</div>
<div class="block">
    <img src="pic2 alt="">
    <button class="button">Button</button>
</div>
<div class="block">
    <img src="pic3" alt="">
    <button class="button">Button</button>
</div>

Есть идея сделать по размеру блока другой блок с прозрачностью 50% и черным и по нажатию, чтобы он был поверх выбранного блока. Но не знаю как сделать

Answer 1

[Самвел Арутюнян]

Здравствуйте. Примерно так должно работать.

$(".button").click(function(){
    $(this).parent().css("background-color", "gray");  // Или как вы там хотите делать серый фон, например: addClass("gray");
});

Я так понял у вас проблема с выбиранием конткретного блока. В этом вам поможет $(this). Если просто, то $(this) - это именно тот элемент, на которой событие клик сработал.

Comments

[Im p3l]

таким образом только фон меняется, а надо чтобы весь блок включая элементы внутри блока становились серыми.

[FeST1VaL]

Lo Ran, вам как бы дали пример как сделать, тут не режим задача решение, не понимаете как сделать читайте/учите/гуглите/создавайте задание фрилансерам на спец площадках

[Самвел Арутюнян]

Lo Ran, используйте $(this), а как задать другие стили уже ищите сами в интернете. Поверьте, вам будет больше пользы от этого, чем если я сейчас напишу весь код здесь. Артем Будин полностью согласен с вашим мнением.

[Анатолий Чернышев]

Сделайте класс

.gray
  position: relative
  &::after
    position: absulute
    left: 0
    right: 0
    top: 0
    bottom: 0

и просто
$(this).parent().addClass('grey');