1個div的多個'onclick'事件（更改div ID）

Question

我有2個div。

一旦選擇了2個div中的1個，每個div的'id'將變爲divActive或divInactive，因此活動的可以使用css高亮顯示。

即使我已經有與每個div關聯的'onclick'動作，是否可以這樣做？

這裏是我的div：

<div class="statusOption" onclick="loadXMLDoc('indexEveryone')">Everyone, everywhere</div> 
<div class="statusOption" onclick="loadXMLDoc('indexFav')">Favourites Only</div> 

這裏是我當前的javascript：

<script> 
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; 
    } 
    } 
xmlhttp.open("GET","../home/" + pageName + ".php",true); 
xmlhttp.send(); 
} 
</script> 

Answer 1

如果你不想使用jQuery你不必。這是一個純粹的JavaScript版本。注意它會切換一個active類，而不是一個ID。

window.onload = function() { 
    var everyone = document.getElementById('everyone'), 
     favorites = document.getElementById('favorites'); 

    everyone.onclick = function() { 
     loadXMLDoc('indexEveryone'); 
     var myClasses = everyone.className, 
      otherClasses = favorites.className; 
     if (myClasses.contains("active")) 
     { 
      everyone.className = 'statusOption'; 
     } 
     else if (otherClasses.contains("active")) { 
      everyone.className = 'statusOption active'; 
      favorites.className = 'statusOption'; 
     } 
     else { 
      everyone.className = 'statusOption active'; 
     } 
    } 

    favorites.onclick = function() { 
     loadXMLDoc('indexFav');   
     var myClasses = favorites.className, 
      otherClasses = everyone.className; 
     if (myClasses.contains("active")) 
     { 
      favorites.className = 'statusOption'; 
     } 
     else if (otherClasses.contains("active")) { 
      favorites.className = 'statusOption active'; 
      everyone.className = 'statusOption'; 
     } 
     else { 
      favorites.className = 'statusOption active'; 
     } 
    } 

    function loadXMLDoc(event) { 
     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; 
      } 
     } 
     xmlhttp.open("GET","../home/" + pageName + ".php",true); 
     xmlhttp.send(); 
    } 
} 

編輯以適應評論請求：如果你總是想一個是積極它縮短了代碼了很多。這是更新的代碼。只要確保你給everyone活動類在HTML

window.onload = function() { 
    var everyone = document.getElementById('everyone'), 
     favorites = document.getElementById('favorites'); 

    everyone.onclick = function() { 
     loadXMLDoc('indexEveryone'); 
     var otherClasses = favorites.className; 
     if (otherClasses.contains("active")) { 
      everyone.className = 'statusOption active'; 
      favorites.className = 'statusOption'; 
     } 
    } 

    favorites.onclick = function() { 
     loadXMLDoc('indexFav');   
     var otherClasses = everyone.className; 
     if (otherClasses.contains("active")) { 
      favorites.className = 'statusOption active'; 
      everyone.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; 
      } 
     } 
     xmlhttp.open("GET","../home/" + pageName + ".php",true); 
     xmlhttp.send(); 
    } 
} 

Answer 2

是的，你可以在更多的onclick一個函數調用。

但是，您不應該更改元素的id，而是添加或刪除類。

而且，你真的應該考慮使用一些像jQuery，這將使你的代碼更簡潔：

<div id="everyone" class="statusOption" onclick="loadXMLDoc('indexEveryone')">Everyone, everywhere</div> 
<div id="favorites" class="statusOption" onclick="loadXMLDoc('indexFav')">Favourites Only</div> 

<script> 
$(document).ready(function(){ 
    $('#everyone').on('click', loadXMLDoc, 'indexEveryone'); 
    $('#favorites').on('click', loadXMLDoc, 'indexFav'); 
    $('div.statusOption').on('click', function(){ 
    $('div.statusOption').removeClass('active'); 
    $(this).addClass('active'); 
    }); 
}); 


function loadXMLDoc(event) 
{ 
$.ajax({ 
    url: "../home/" + event.data + ".php", 
    type: "GET", 
    success: function(result){ $("#centreCont").html(result); } 
}); 
</script>