Как улучшить это переключение Javascript divs? - PullRequest
Новая
       27

Как улучшить это переключение Javascript divs?

0 голосов
/ 17 марта 2019

Я ищу способ улучшить этот кусок кода, поскольку я отказываюсь верить, что нет лучшего способа сделать это.

Вот HTML: 

<div id = "panel1" onclick = "Function1()">
  First panel
</div>
<div id = "panel2" onclick = "Function2()">
  Second panel
</div>
<div id = "panel3" onclick = "Function3()">
  Third panel
</div>

Вот Джаваскрипт: 

function Function1() {
  document.getElementById('panel1').style.display = "flex";
  document.getElementById('panel2').style.display = "none";
  document.getElementById('panel3').style.display = "none";
}
function Function1() {
  document.getElementById('panel1').style.display = "none";
  document.getElementById('panel2').style.display = "flex";
  document.getElementById('panel3').style.display = "none";
}
function Function1() {
  document.getElementById('panel1').style.display = "none";
  document.getElementById('panel2').style.display = "none";
  document.getElementById('panel3').style.display = "flex";
}

Предполагается изменить стиль отображения блоков.

Ответы [ 2 ]

0 голосов
/ 17 марта 2019

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

toggle = () => {
  let allPanels = document.querySelectorAll("div[id^='panel']");
  if (event.target.style.display === 'flex') { // Show all 
    allPanels.forEach(e => {
      e.style.display = "block";
    });
  } else { // Hide some
    let curId = event.target.id;
    allPanels.forEach(e => {
      if (e.id === curId) {
        e.style.display = "flex";
      } else {
        e.style.display = "none";
      }
    });
  }
};
<div id="panel1" onclick="toggle()">
  First panel
</div>
<div id="panel2" onclick="toggle()">
  Second panel
</div>
<div id="panel3" onclick="toggle()">
  Third panel
</div>

Если вы не хотите, чтобы он мог переключаться: 

toggle = () => {
  let allPanels = document.querySelectorAll("div[id^='panel']");
  let curId = event.target.id;
  allPanels.forEach(e => {
    if (e.id === curId) {
      e.style.display = "flex";
    } else {
      e.style.display = "none";
    }
  });

};
<div id="panel1" onclick="toggle()">
  First panel
</div>
<div id="panel2" onclick="toggle()">
  Second panel
</div>
<div id="panel3" onclick="toggle()">
  Third panel
</div>

Надеюсь, это поможет,

0 голосов
/ 17 марта 2019

JQuery fadeIn и fadeOut могут быть более плавными переходами. Документация http://api.jquery.com/fadein/

$( "#panel1" ).fadeIn( "slow", function() {
    // Animation complete
  });

$( "#panel1" ).fadeOut( "slow", function() {
    // Animation complete
  });


function Function1() {
   $( "#panel1" ).fadeOut( "slow", function() {
    // Animation complete.
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "panel1" onclick = "Function1()">
  First panel
</div>
<div id = "panel2" onclick = "Function1()">
  Second panel
</div>
...