常規的JavaScript函數表達式的getElementById

我有以下的代碼相似的部分：常規的JavaScript函數表達式的getElementById

document.getElementById('caption1').onclick = function() { 
    window.open("#abstract1","_self"); 
    if(document.getElementById('abstract1').style.display == 'none') { 
     document.getElementById('abstract1').style.display = ''; 
    } 
    else { 
     document.getElementById('abstract1').style.display = "none";        
    } 

}; 
document.getElementById('caption2').onclick = function() { 
    window.open("#abstract2","_self"); 
    if(document.getElementById('abstract2').style.display == 'none') { 
     document.getElementById('abstract2').style.display = ''; 
    } 
    else { 
     document.getElementById('abstract2').style.display = "none";        
    } 

}; 
document.getElementById('caption3').onclick = function() { 
    window.open("#abstract3","_self"); 
    if(document.getElementById('abstract3').style.display == 'none') { 
     document.getElementById('abstract3').style.display = ''; 
    } 
    else { 
     document.getElementById('abstract3').style.display = "none";        
    } 

};

代碼反潛寫了這麼多類似的代碼塊就這麼直到9我怎麼可以只寫一個將工作對於。也許我應該寫一些正則表達式，但是如何？

來源

2015-06-21 user3563059

我不知道爲什麼你認爲正則表達式在這裏會有所幫助。你可以做的是用for循環內的一個塊代替9個相似的塊。或者你可以在父元素上使用委託事件處理程序，並在該處理程序中檢查被單擊的元素的ID。 – nnnnnn

我建議在包含div上使用事件委託。 – user2182349

這不是一個壞問題，只是OP錯誤地建議使用正則表達式 – Downgoat

只需連接一個變量與您的字符串。也採取@squints建議使用功能，而不是創建一打匿名功能對象

someFunction(){ 
    var id = "abstract" + this.id.substr(7); 
    window.open("#" + id,"_self"); 

    el = document.getElementById(id); 
    el.style.display = (el.style.display === 'none') ? '' : "none"; 
} 

for(var x = 0; x < 10; x++){ 
    document.getElementById('caption' + x).onclick = someFunction; 
}

來源

2015-06-21 14:09:53 Gary

「x」不會成爲您期望的值。使用'this'來代替。 – 2015-06-21 14:11:34

@squint良好的捕獲，我會解決它 – Gary

+1只有我建議從循環中刪除函數，以便您不創建多個函數對象。但這不是什麼大不了的事情。 – 2015-06-21 14:21:42

常規的JavaScript函數表達式的getElementById

回答

相關問題