БЛОГ НА HUSL


Как сделать так что бы кнопки не исчезали при включении блоков

Автор вопроса: Chelovek Mira

Друзья, помогите решить задачу. Есть две кнопки. При нажатии на каждую появляется два блока. Когда все четыре включаются, должен появиться пятый блок, а остальные исчезнуть, но вместе с этим у меня пропадают и кнопки. Мне нужно так что бы кнопки не пропадали. Вот код:

function TotalLength1(){
    this.textContent = this.textContent === 'off' ? 'on' : 'off';   
 var elements = _all('.block1, .block2');
 toggle(elements);
 
  function toggle(elems) {
    for( var i = 0; i < elems.length; i++ ) {
      elems[i].style.display = isVisible(elems[i]) ? "none" : "block";
     }
   }

  function isVisible(el) {
    return getComputedStyle(el).display !== 'none';
   }

  function _all(str) {
    return document.querySelectorAll(str);
   }
}
function TotalLength2(){
    this.textContent = this.textContent === 'off' ? 'on' : 'off';   
 var elements = _all('.block3, .block4');
 toggle(elements);
 
  function toggle(elems) {
    for( var i = 0; i < elems.length; i++ ) {
      elems[i].style.display = isVisible(elems[i]) ? "none" : "block";
     }
   }

  function isVisible(el) {
    return getComputedStyle(el).display !== 'none';
   }

  function _all(str) {
    return document.querySelectorAll(str);
   }
}

document.addEventListener('click', function _tmp(e) {
  let block = e.target.closest('.block');
  if (!block) return; // return прервет функцию, если кликнули не на нужный блок.

  block.classList.toggle('clicked');

  let clicked = document.querySelectorAll('.block.clicked');
  if (clicked.length == 2) {
    clicked.forEach(e => e.style.display = "none");
    // .block.clicked без пробела: Все элементы, у которых есть оба класса
    document.getElementById('hidden').style.display = "block";

    document.removeEventListener("click", _tmp);
  }
});
 
.button1 {
   text-align: center;
   padding: 8px 10px;
   border: solid 1px #777777;
   color: #7777777;
   background: #ffffff;
   tansition: all .3s linear;
   -webkit-transition: all .3s linear;
   -moz-transition: all .3s linear;
   text-transform: uppercase;
 

 }
.button2{
   text-align: center;
   padding: 8px 10px;
   border: solid 1px #777777;
   color: #7777777;
   background: #ffffff;
   tansition: all .3s linear;
   -webkit-transition: all .3s linear;
   -moz-transition: all .3s linear;
   text-transform: uppercase;
   
 }

 .block1 {
   text-align: center;
   padding: 8px 10px;
   border: solid 1px #777777;
   color: #777777;
   background: #ffffff;
   transition: all .3s linear;
   -webkit-transition: all .3s linear;
   -moz-transition: all .3s linear;
   text-transform: uppercase;
   display:none;
    
   
 }
.block2 {
   text-align: center;
   padding: 8px 10px;
   border: solid 1px #777777;
   color: #777777;
   background: #ffffff;
   transition: all .3s linear;
   -webkit-transition: all .3s linear;
   -moz-transition: all .3s linear;
   text-transform: uppercase;
   display:none;
 
 }
.block3 {
   text-align: center;
   padding: 8px 10px;
   border: solid 1px #777777;
   color: #777777;
   background: #ffffff;
   transition: all .3s linear;
   -webkit-transition: all .3s linear;
   -moz-transition: all .3s linear;
   text-transform: uppercase;
   display:none;
   
 }
.block4 {
   text-align: center;
   padding: 8px 10px;
   border: solid 1px #777777;
   color: #777777;
   background: #ffffff;
   transition: all .3s linear;
   -webkit-transition: all .3s linear;
   -moz-transition: all .3s linear;
   text-transform: uppercase;
   display:none;
   
  
 }
.block5 {
   text-align: center;
   padding: 8px 10px;
   border: solid 1px #777777;
   color: #777777;
   background: #ffffff;
   transition: all .3s linear;
   -webkit-transition: all .3s linear;
   -moz-transition: all .3s linear;
   text-transform: uppercase;
   
  display:none;
 box-shadow: 0 0 5px 5px #fe2c2c, 0 0 5px 5px #ffec69, 0 0 5px 5px #ff7a0e;  
  background: linear-gradient(180deg, #292827, #292827);
  animation-name: block5;
  animation-timing-function: linear;
  animation-duration: 1s;
  animation-iteration-count: infinite;
 
}

@keyframes block5 {
  50% {
    opacity: 0;
  }
}
<div class="block">
  <input type="button" class="button1" value="Кнопка" onclick="TotalLength1()" />
  <input type="button" class="block1" value="блок1" />


  <input type="button" class="block2" value="блок2"/>
</div>

<div class="block">
  <input type="button" class="button2" value="Кнопка" onclick="TotalLength2()"/>
   <input type="button" class="block3" value="блок3"/>

  
  <input type="button" class="block4" value="блок4"/>
</div>

  


 
  
<button class="block5" id="hidden">блок5</button>


Источник

Ответы (1 шт):

Автор решения: midnightelf18

Закомментируете 49 строчку, где вы ставите display: none для каждого элемента который имеет селектор .block.clicked а этот селектор имеет только тот элемент на который кликнули (при повторном клике класс .clicked убирается)

upd: так просто добавлю. если вам нужно чтобы еще блок с id=hidden пропадал если не нажаты обе кнопки, то закомментируете 52 строку (document.removeEventListener("click", _tmp);) и после проверки if (clicked.length == 2) добавьте еще и

else if (clicked.length == 1)
    document.getElementById('hidden').style.display = "none";


function TotalLength1(){
    this.textContent = this.textContent === 'off' ? 'on' : 'off';   
 var elements = _all('.block1, .block2');
 toggle(elements);
 
  function toggle(elems) {
    for( var i = 0; i < elems.length; i++ ) {
      elems[i].style.display = isVisible(elems[i]) ? "none" : "block";
     }
   }

  function isVisible(el) {
    return getComputedStyle(el).display !== 'none';
   }

  function _all(str) {
    return document.querySelectorAll(str);
   }
}
function TotalLength2(){
    this.textContent = this.textContent === 'off' ? 'on' : 'off';   
 var elements = _all('.block3, .block4');
 toggle(elements);
 
  function toggle(elems) {
    for( var i = 0; i < elems.length; i++ ) {
      elems[i].style.display = isVisible(elems[i]) ? "none" : "block";
     }
   }

  function isVisible(el) {
    return getComputedStyle(el).display !== 'none';
   }

  function _all(str) {
    return document.querySelectorAll(str);
   }
}

document.addEventListener('click', function _tmp(e) {
  let block = e.target.closest('.block');
  if (!block) return; // return прервет функцию, если кликнули не на нужный блок.

  block.classList.toggle('clicked');

  let clicked = document.querySelectorAll('.block.clicked');
  if (clicked.length == 2) {
    // clicked.forEach(e => e.style.display = "none");
    // .block.clicked без пробела: Все элементы, у которых есть оба класса
    document.getElementById('hidden').style.display = "block";

    document.removeEventListener("click", _tmp);
  }
});
.button1 {
   text-align: center;
   padding: 8px 10px;
   border: solid 1px #777777;
   color: #7777777;
   background: #ffffff;
   tansition: all .3s linear;
   -webkit-transition: all .3s linear;
   -moz-transition: all .3s linear;
   text-transform: uppercase;
 

 }
.button2{
   text-align: center;
   padding: 8px 10px;
   border: solid 1px #777777;
   color: #7777777;
   background: #ffffff;
   tansition: all .3s linear;
   -webkit-transition: all .3s linear;
   -moz-transition: all .3s linear;
   text-transform: uppercase;
   
 }

 .block1 {
   text-align: center;
   padding: 8px 10px;
   border: solid 1px #777777;
   color: #777777;
   background: #ffffff;
   transition: all .3s linear;
   -webkit-transition: all .3s linear;
   -moz-transition: all .3s linear;
   text-transform: uppercase;
   display:none;
    
   
 }
.block2 {
   text-align: center;
   padding: 8px 10px;
   border: solid 1px #777777;
   color: #777777;
   background: #ffffff;
   transition: all .3s linear;
   -webkit-transition: all .3s linear;
   -moz-transition: all .3s linear;
   text-transform: uppercase;
   display:none;
 
 }
.block3 {
   text-align: center;
   padding: 8px 10px;
   border: solid 1px #777777;
   color: #777777;
   background: #ffffff;
   transition: all .3s linear;
   -webkit-transition: all .3s linear;
   -moz-transition: all .3s linear;
   text-transform: uppercase;
   display:none;
   
 }
.block4 {
   text-align: center;
   padding: 8px 10px;
   border: solid 1px #777777;
   color: #777777;
   background: #ffffff;
   transition: all .3s linear;
   -webkit-transition: all .3s linear;
   -moz-transition: all .3s linear;
   text-transform: uppercase;
   display:none;
   
  
 }
.block5 {
   text-align: center;
   padding: 8px 10px;
   border: solid 1px #777777;
   color: #777777;
   background: #ffffff;
   transition: all .3s linear;
   -webkit-transition: all .3s linear;
   -moz-transition: all .3s linear;
   text-transform: uppercase;
   
  display:none;
 box-shadow: 0 0 5px 5px #fe2c2c, 0 0 5px 5px #ffec69, 0 0 5px 5px #ff7a0e;  
  background: linear-gradient(180deg, #292827, #292827);
  animation-name: block5;
  animation-timing-function: linear;
  animation-duration: 1s;
  animation-iteration-count: infinite;
 
}

@keyframes block5 {
  50% {
    opacity: 0;
  }
}
<div class="block">
  <input type="button" class="button1" value="Кнопка" onclick="TotalLength1()" />
  <input type="button" class="block1" value="блок1" />


  <input type="button" class="block2" value="блок2"/>
</div>

<div class="block">
  <input type="button" class="button2" value="Кнопка" onclick="TotalLength2()"/>
   <input type="button" class="block3" value="блок3"/>

  
  <input type="button" class="block4" value="блок4"/>
</div>

  


 
  
<button class="block5" id="hidden">блок5</button>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.