1

我有一些具有相同课程的 div。当我单击其中一个 div 时，我想将显示从其他 div 更改为“阻止”。我目前正在使用内联 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

现在，如何使用事件处理程序来做到这一点？

4

2 回答 2

0

jquery是一个选项吗？

$('.test_a').click(function(){
    $('#' + this.id + '_test').css('display','block'); (or even .show())
});
于 2012-07-26T15:46:50.183 回答
0

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

这是一个jsFiddle。

于 2012-07-26T15:54:00.607 回答