Сделайте JS-часть проще

Итак, у меня есть веб-страница, подобная этой. Три кнопки swich между div и для этого не так много кода. Но если бы у меня было 15 div, чтобы переключаться между ними, будет намного больше кода. Есть ли способ сделать мой JS-код более простым?Сделайте JS-часть проще

<!DOCTYPE> 
<html> 
<head> 
    <style type="text/css"> 
     .info { 
      width: 400px; 
      height: 580px; 
      margin: 40px; 

      float: right; 
     } 

    </style> 
</head> 

<body> 

    <div class="info" id="swapper-first" style="display:block; border:2px dashed red; padding:25px;"> 
     <p style="margin:0; color:red;"> 
      Red div 
     </p> 
    </div> 

    <div class="info" id="swapper-second" style="display:none; border:2px dotted blue; padding:25px;"> 
     <p style="margin:0; color:blue;"> 
      Blue div 
     </p> 
    </div> 

    <div class="info" id="swapper-third" style="display:none; border:2px solid green; padding:25px;"> 
     <p style="margin:0; color:green;"> 
      Green div 
     </p> 
    </div> 

    <p style="text-align:center; font-weight:bold;"> 
     <a href="javascript:mred('swapper-first','swapper-second', 'swapper-third')">Red</a> 
     <a href="javascript:mblue('swapper-first','swapper-second', 'swapper-third')">Blue</a> 
     <a href="javascript:mgreen('swapper-first','swapper-second', 'swapper-third')">Green</a> 
    </p> 

    <script type="text/javascript"> 
     function mred(div1,div2,div3) { 
      d1 = document.getElementById(div1); 
      d2 = document.getElementById(div2); 
      d3 = document.getElementById(div3); 

      d1.style.display = "block"; 
      d2.style.display = "none"; 
      d3.style.display = "none"; 
     } 

     function mblue(div1,div2,div3) { 
      d1 = document.getElementById(div1); 
      d2 = document.getElementById(div2); 
      d3 = document.getElementById(div3); 

      d1.style.display = "none"; 
      d2.style.display = "block"; 
      d3.style.display = "none" 
     } 

     function mgreen(div1,div2,div3) { 
      d1 = document.getElementById(div1); 
      d2 = document.getElementById(div2); 
      d3 = document.getElementById(div3); 

      d1.style.display = "none"; 
      d2.style.display = "none"; 
      d3.style.display = "block" 
     } 
    </script> 
</body> 
</html>

источник

2014-12-18 user3415893

Вы можете использовать JQuery? Это упростило бы это. – Matt

Я рекомендую переместить этот вопрос в [Обзор кода] (http://codereview.stackexchange.com/), поскольку это скорее оценка вашего кода, чем попытка решить ошибки и работать со сложными алгоритмами. – SirPython

Я не думаю, что вы ищете инструкцию 'switch'. Скорее для цикла 'for'. – Bergi

В JQuery это было бы возможно.

function swapDiv(id){ 
    $('.info').hide(); //hides everything 
    $('#'+id).show(); //shows the div with the ID that was passed in 
}

Просто добавьте класс «divs» во все ваши div. Вызовите функцию, передав идентификатор div, который вы хотите оставаться видимым.

swapDiv('swapper-first')

источник

2014-12-18 20:29:43 Matt

проверялось, но должно работать:

HTML:

Добавьте атрибут данных к HREF, с DIV вы хотите сделать видимым:

<a href="javascript:divs()" data-value="swapper-third">Green</a>

JS :

function divs() { 
      var a = document.querySelectorAll('div.info'); 
      var b = this.getAttribute('value'); 


    for (var i = 0;i<a.length;i++) { 
     a[i].style.display = 'none'; 
    } 
      document.getElementById(b).style.display = 'block'; 
}

источник

2014-12-18 20:33:18 baao

Использование массива:

function mred(divs) { 
    for (var i=0; i < divs.length; i++) { 
    var div = document.getElementById(divs[i]); 
    div.style.display = "block"; 
    } 
}

источник

2014-12-18 20:34:02 Thierry

Держи

<!DOCTYPE> 
<html> 
<head> 
    <style type="text/css"> 
     .info { 
      width: 400px; 
      height: 580px; 
      margin: 40px; 

      float: right; 
     } 

    </style> 
</head> 

<body> 

    <div class="info" id="swapper-first" style="display:block; border:2px dashed red; padding:25px;"> 
     <p style="margin:0; color:red;"> 
      Red div 
     </p> 
    </div> 

    <div class="info" id="swapper-second" style="display:none; border:2px dotted blue; padding:25px;"> 
     <p style="margin:0; color:blue;"> 
      Blue div 
     </p> 
    </div> 

    <div class="info" id="swapper-third" style="display:none; border:2px solid green; padding:25px;"> 
     <p style="margin:0; color:green;"> 
      Green div 
     </p> 
    </div> 

    <p style="text-align:center; font-weight:bold;"> 
     <a href="javascript:mcolor('swapper-first')">Red</a> 
     <a href="javascript:mcolor('swapper-second')">Blue</a> 
     <a href="javascript:mcolor('swapper-third')">Green</a> 
    </p> 

    <script type="text/javascript"> 
    function mcolor(_id) { 
     elements = document.getElementsByClassName('info') 
     for(var i = 0; i < elements.length; i++) { 
      if(elements[i].id == _id) { 
       elements[i].style.display = 'block'; 
      } else { 
       elements[i].style.display = 'none'; 
      } 
     } 
    } 
    </script> 
</body> 
</html>

источник

2014-12-18 20:36:39 sahilbathla

Сделайте JS-часть проще

ответ

Смежные вопросы