затемнение div при нажатии кнопки

22 февраля 2022, 08:00

Имею код на js:

$("button").click(function () {
$("div").toggleClass("shadow");
})

css:

div {
  width: 100px;
  height: 100px;
  background: #ff0;
  margin: 50px auto;
}
.shadow {
  box-shadow: 0 0 0 9999px rgba(0,0,0, 0.3);
}

У меня вопрос как можно здесь привязать это к конкретному div и кнопке?(id нет, только названия класса) и откликивание происходило при нажатии на весь div. Подскажите пожалуйста.

Answer 1

Включаем div только по кнопке. Выключаем div по кнопке и div.

$('button').on('click', function() { 
  $("div").toggleClass("shadow"); 
}); 
$('div').on('click', function() { 
  $(this).removeClass("shadow"); 
});

div { 
  width: 100px; 
  height: 100px; 
  background: #ff0; 
  margin: 50px auto; 
} 
 
.shadow { 
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<button>Кнопка</button> 
<div></div>

Answer 2

Используйте привязку к классу div. И вместо функции $("button").click(function () { можно использовать $('.shadow').on('click', function() {

    $('.shadow').on('click', function() { 
        $("div").toggleClass("shadow"); 
    })

    div { 
        width: 100px; 
        height: 100px; 
        background: #ff0; 
        margin: 50px auto; 
    } 
    .shadow { 
        box-shadow: 0 0 0 9999px rgba(0,0,0, 0.3); 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="shadow">Именно нажатие на весь div, а не кнопки.<button>Тык</button></div>