Javascript 带有类的Eventhandler

我在同一个班上有几张唱片。当我单击其中一个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>

因此，当您单击id为example_a的div时，我想更改example_a_test的显示

工作示例：

现在，如何使用EventHandler实现这一点？

jquery是一个选项吗

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

---

下面是一个

单击
事件处理程序，您可以使用它：

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
元素设置为
display:none在CSS中

下面是一个。
onclick是一个事件处理程序，请参见示例。你的意思不同吗？好的，我知道onclick是一个事件处理程序，但我不知道如何在不使用内联javascript的情况下制作我制作的示例。我不喜欢使用jQuery，以了解真正的情况。但是谢谢你的回答！谢谢但是由于某些原因，它不起作用：s：我真的不知道你发布的javascript是如何工作的，不知道你是否有时间做这件事，但是你能解释一下发生了什么吗？你能将你的代码发布到jsfiddle.net吗？pastehtml.com在这里工作时被阻止。基本上，我创建了一个跨浏览器事件侦听器函数（
listen
），您可以将参数传递给事件处理程序。它侦听
load
，然后调用
init
init
获取
div
元素，并将它们传递给
for
循环，该循环随后调用另一个函数，该函数将单击处理程序分配给每个
div
。如果
div
有一个
test\u a
类，那么它将测试元素的CSS设置为
display:block
。您需要将其放入外部JS文件中，并在
head
元素中调用它。谢谢！顺便说一句，你说的是跨浏览器，这只能在chrome中使用，这意味着javascript可以更简单吗？我现在也做了同样的事情，但是使用mouseover和mouseout，这是正确的方法吗？哦，它只需要在chrome中工作；）。非常感谢您的时间和帮助！
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();
    });
  }
});