事件處理器類

我有一些div與同一類。當我點擊其中一個div時，我想將其他div的顯示改爲'block'。我目前正在使用內嵌JavaScript，但我希望不使用內聯JavaScript。我現在擁有的一切：事件處理器類

<div class="test_a" id="example_a" onclick="testfunction(this)"></div> 
<div class="test_a" id="example_b" onclick="testfunction(this)"></div> 
<div class="test_a" id="example_c" onclick="testfunction(this)"></div> 
<div class="test_a" id="example_d" onclick="testfunction(this)"></div> 
<div class="test_a" id="example_e" onclick="testfunction(this)"></div> 

<div class="test_b" id="example_a_test"></div> 
<div class="test_b" id="example_b_test"></div> 
<div class="test_b" id="example_c_test"></div> 
<div class="test_b" id="example_d_test"></div> 
<div class="test_b" id="example_e_test"></div>

我在javascript函數：

function testfunction(x){ 
var example = document.getElementById(x.id + "_test"); 
example.style.display = 'block'; 
}

所以，當你點擊ID爲example_a股利，我想從example_a_test更改顯示。

工作示例：http://pastehtml.com/view/c63rmz6tw.html

現在，如何與事件處理器做到這一點？

來源

2012-07-26 user3422232

onclick是一個事件處理程序，請參閱http://www.quackit.com/javascript/javascript_event_handlers.cfm。你的意思是不同的？ – 2012-07-26 15:49:57

好的，我知道onclick是一個事件處理程序，但我不完全知道如何在不使用內聯JavaScript的情況下創建我的示例。 – user3422232 2012-07-26 15:54:00

這裏有一個click事件處理程序，您可以使用：

window.addEventListener('load', init, false); 

var init = (function() { 
    var divs = document.getElementsByTagName('div'), 
     i = 0; 
    for (i = divs.length; i--;) { 
    listener(i); 
    } 
    function listener(i) { 
    divs[i].addEventListener('click', function(e) { 
     var id = this.getAttribute('id'), 
      idTest = id + '_test', 
      testElem = document.getElementById(idTest), 
      divClass = this.getAttribute('class'); 
     if (divClass === 'test_a') { 
     testElem.style.display = 'block'; 
     } 
     e.preventDefault(); 
    }); 
    } 
});

確保您test_b元素在你的CSS設置爲display: none;。

這是jsFiddle。

來源

2012-07-26 15:54:00

謝謝！但由於某種原因，它不起作用：s： http://pastehtml.com/view/c63u0u3z8.html 我真的不知道你發佈的JavaScript是如何工作的，不知道你是否有這個時間，但你能解釋發生了什麼？ – user3422232 2012-07-26 16:04:12

你可以將你的代碼發佈到jsfiddle.net嗎？ pastehtml.com在這裏被阻止工作。 – 2012-07-26 17:27:12

基本上，我創建了一個跨瀏覽器事件偵聽器函數（'listen'），您可以將參數傳遞給事件處理程序。它監聽'load'，然後調用'init'。 'init'獲取'div'元素並將它們傳遞給'for'循環，然後調用另一個函數，爲每個'div'分配點擊處理程序。如果'div'有一個'test_a'類，那麼它會爲測試元素設置CSS爲'display：block'。你需要把它放到一個外部JS文件中，並在你的'head'元素中調用它。 – 2012-07-26 17:38:34

是jquery的一個選項嗎？

$('.test_a').click(function(){ 
    $('#' + this.id + '_test').css('display','block'); (or even .show()) 
});

來源

2012-07-26 15:46:50

我不喜歡使用jQuery來理解真正發生了什麼。但感謝您的回答！ – user3422232 2012-07-26 15:52:02

事件處理器類

回答

相關問題