Javascript - 如何擴展此腳本以合併其他班級更改？

我有一段代碼允許ajax在點擊後運行。一旦div被點擊後，ajax不僅會運行，而且div會將類從'statusOption'更改爲'statusOptionActive'。Javascript - 如何擴展此腳本以合併其他班級更改？

到目前爲止，這一切都看起來很好，但我撞到了牆上。我需要添加一個第三個div，它也有類一旦點擊改變。你可以看到我的新的div也在代碼：

我當前工作的JavaScript爲2周的div：

<script> 
window.onload = function() { 
    var basics = document.getElementById('basics'), 
     photos = document.getElementById('photos'); 

    basics.onclick = function() { 
     loadXMLDoc('indexBasics'); 
     var otherClasses = photos.className; 
     if (otherClasses.contains("Active")) { 
      basics.className = 'statusOptionActive'; 
      photos.className = 'statusOption'; 
     } 
    } 

    photos.onclick = function() { 
     loadXMLDoc('indexPhotos');   
     var otherClasses = basics.className; 
     if (otherClasses.contains("Active")) { 
      photos.className = 'statusOptionActive'; 
      basics.className = 'statusOption'; 
     } 
    } 

    function loadXMLDoc(pageName) 
    { 
     var xmlhttp; 
     if (window.XMLHttpRequest) 
     {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
     } 
     else 
     {// code for IE6, IE5 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 

     xmlhttp.onreadystatechange = function() 
     { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
       document.getElementById("centreCont").innerHTML=xmlhttp.responseText; 
      } 
     } 

     function get_query() 
     { 
      var url = location.href; 
      var qs = url.substring(url.indexOf('?') + 1).split('&'); 
      for(var i = 0, result = {}; i < qs.length; i++){ 
       qs[i] = qs[i].split('='); 
       result[qs[i][0]] = decodeURIComponent(qs[i][1]); 
      } 
      return result; 
     } 

     xmlhttp.open("GET","../profile/" + pageName + ".php?user=" + get_query()['user'],true); 
     xmlhttp.send(); 
    } 
} 
</script>

這裏是我使用的div，所在班換一次點擊，AJAX是積極的。最後一個div也是需要添加到腳本中的那個：

<div id="basics" class="statusOptionActive" onclick="loadXMLDoc('indexBasics')">Basics</div> 
<div id="photos" class="statusOption" onclick="loadXMLDoc('indexPhotos')">Photos</div> 
<div id="favorites" class="statusOption" onclick="loadXMLDoc('indexFav')">Message User</div>

////////////我試圖讓自己無法運行。這裏是我的代碼////////

<script> 
window.onload = function() { 
    var basics = document.getElementById('basics'), 
     photos = document.getElementById('photos'), 
     messages = document.getElementById('messages'); 

    basics.onclick = function() { 
     loadXMLDoc('indexBasics'); 
     var otherClasses = ('photos.className', 'messages.className'); 
     if (otherClasses.contains("Active")) { 
      basics.className = 'statusOptionActive'; 
      photos.className = 'statusOption'; 
      messages.className = 'statusOption'; 
     } 
    } 

    photos.onclick = function() { 
     loadXMLDoc('indexPhotos');   
     var otherClasses = ('basics.className', 'messages.className'); 
     if (otherClasses.contains("Active")) { 
      photos.className = 'statusOptionActive'; 
      basics.className = 'statusOption'; 
      messages.className = 'statusOption'; 
     } 
    } 

    messages.onclick = function() { 
     loadXMLDoc('indexMessages');   
     var otherClasses = ('basics.className', 'photos.className'); 
     if (otherClasses.contains("Active")) { 
      photos.className = 'statusOption'; 
      basics.className = 'statusOption'; 
      messages.className = 'statusOptionActive'; 
     } 
    } 


    function loadXMLDoc(pageName) 
    { 
     var xmlhttp; 
     if (window.XMLHttpRequest) 
      {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
      } 
     else 
      {// code for IE6, IE5 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
    xmlhttp.onreadystatechange=function() 
      { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
      document.getElementById("centreCont").innerHTML=xmlhttp.responseText; 
      } 
      } 

     function get_query(){ 
      var url = location.href; 
      var qs = url.substring(url.indexOf('?') + 1).split('&'); 
      for(var i = 0, result = {}; i < qs.length; i++){ 
      qs[i] = qs[i].split('='); 
      result[qs[i][0]] = decodeURIComponent(qs[i][1]); 
      } 
      return result; 
     } 

     xmlhttp.open("GET","../profile/" + pageName + ".php?user=" + get_query()['user'],true); 
     xmlhttp.send(); 
     } 
} 
</script>

來源

2013-08-24 user2527750

什麼是您在添加第三DIV的代碼問題？顯示你已經嘗試過，爲什麼它不起作用？ – Barmar

我已經將我的嘗試添加到了我的問題中，以查看我可能會出錯的地方 – user2527750

爲什麼在設置新課程之前需要檢查其他課程？你在新版本中檢查其他類的代碼都是錯誤的，但它甚至不需要。 – Barmar

var otherClasses = ('basics.className', 'photos.className');

只設置otherClasses字符串'photos.className'的basics和photos的DIV不是類。但是你根本不需要檢查其他類，只需設置你想要的類即可。

window.onload = function() { 
    var basics = document.getElementById('basics'), 
     photos = document.getElementById('photos'), 
     messages = document.getElementById('messages'); 

    basics.onclick = function() { 
     loadXMLDoc('indexBasics'); 
     basics.className = 'statusOptionActive'; 
     photos.className = 'statusOption'; 
     messages.className = 'statusOption'; 
    } 

    photos.onclick = function() { 
     loadXMLDoc('indexPhotos');   
     photos.className = 'statusOptionActive'; 
     basics.className = 'statusOption'; 
     messages.className = 'statusOption'; 
    } 

    messages.onclick = function() { 
     loadXMLDoc('indexMessages');   
     photos.className = 'statusOption'; 
     basics.className = 'statusOption'; 
     messages.className = 'statusOptionActive'; 
    }

這裏有一個幹版：

window.onload = function() { 
    var basics = document.getElementById('basics'), 
     photos = document.getElementById('photos'), 
     messages = document.getElementById('messages'); 
    var all_divs = [basics, photos, messages]; 

    function click_handler() { 
     var id = this.id; 
     var doc = 'index' + id[0].toUpperCase + id.substr(1); 
     loadXMLDoc(doc); 
     for (var i = 0; i < all_divs.count; i++) { 
      if (all_divs[i] != this) { 
       all_divs[i].className = 'statusOption'; 
      } 
     } 
     this.className = 'statusOptionActive'; 
    } 

    basics.onclick = photos.onclick = messages.onclick = click_handler; 

    ... 

}

來源

2013-08-24 21:02:23 Barmar

你是先生，是某種天才。 – user2527750

添加了DRY版本。 – Barmar

var basics = document.getElementById('basics'),

是你在哪裏得到引用您的按鈕，以便與提供的XML

var button3 = document.getElementById('favorites'),

然後你做出改變類魔術發生

button3.onclick = function() { 
     loadXMLDoc('indexPhotos');   
     var otherClasses = basics.className; 
     if (otherClasses.contains("Active")) { 
      photos.className = 'statusOptionActive'; 
      basics.className = 'statusOption'; 
     } 
    }

東西告訴我，函數不是你寫的^^^

來源

2013-08-24 20:48:16 Martin

Javascript - 如何擴展此腳本以合併其他班級更改？

回答

相關問題