使JS部分更簡單

所以，我有一個這樣的網頁。三個按鈕在divs之間切換，並沒有太多的代碼。但是如果我有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的ID來調用函數。

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部分更簡單

回答

相關問題