Как можно реализовать на js или jquery появление и сокрытие блока?

Question

[Dryzhkov]

Всем привет есть такой скрипт:

$('.floor,.floorcase').click(function() {
$(this).addClass('fade');
});
$(document).mouseup(function (e) {
var container = $('.floor');
if (container.has(e.target).length === 0){
container.removeClass('fade');
}
});

нужно чтобы при нажатии на кнопку с классом floor добавлялся класс fade и к элементу с классом floor и floorcase, и при нажатии вне элемента с классом floor класс fade пропадал однако не работает

класс добавляется только к floor

а не к floorcase

Answer 1

[Тигран Абрамян]

$('.floor').click(function() {
  $('.floor, .floorcase').each(function() {
    $(this).addClass('fade');
  });
});

$(document).mouseup(function(e) {
  const floor = $('.floor');
  const floorcase = $('.floorcase');
  if (floor.has(e.target).length === 0 && floorcase.has(e.target).length === 0) {
    floor.removeClass('fade');
    floorcase.removeClass('fade');
  }
});

Comments

[Dryzhkov]

спасибо)

[Dryzhkov]

а как реализовать что бы при нажатии на другую кнопку убирался элемент floorcase и появлялся другой?

[Тигран Абрамян]

Dryzhkov,
создаете элемент задаете ему display: none
при клике на эту кнопку задаете floorcase display: none а этому новому элементу display: block

[Dryzhkov]

TAbrahamyan, это да так и сделал, просто приходится прописывать данный скрипт под 8 элементов, а есть запись короче?

[Тигран Абрамян]

Dryzhkov, не понимаю, если у вас 8 элементов с 8-ми разными классами то как вы хотите записать короче?
и еще не до конца понял этих кнопок наверно тоже 8 штук или 1
ну может есть решение но что то не додумываюсь