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

现在，如何使用eventhandlers进行此操作？

Answer 1

jquery是一个选项吗？

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

Answer 2

以下是您可以使用的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。

带有类的Eventhandler

2 个答案: