1

同じクラスのdivがいくつかあります。それらのdivの1つをクリックすると、表示を他の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

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 に答える