javascript - 带有类的事件处理程序

Question

我有一些属于同一类的 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 的 div 时，我想更改 example_a_test 的显示。

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

现在，如何使用事件处理程序执行此操作？

Answer 1

这是您可以使用的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();
    });
  }
});

确保您的 CSS 中的 test_b 元素设置为 display: none;。

这是一个jsFiddle .