1

非常に単純なスクリプトを作成しようとしていますが、問題がわかりません。スクリプトの関数は、各リスト要素の内部 html を表示する必要がありますが、最後の「オレンジ」のみを表示し続けます。

これが私のhtmlにあるものです：

<ul id='mylist'>
  <li>Red</li>
  <li>Green</li>
  <li>Black</li>
  <li>Orange</li>
</ul>

以下はそのスクリプトです：

var x = document.getElementById('mylist');
var z = x.getElementsByTagName('li');

for (i = 0; i < z.length; i++) {    
    var res = z[i].innerHTML;
    z[i].setAttribute('onclick','alert(res)');
}

おそらくここにクロージャーを追加する必要がありますが、本当に必要かどうか、また追加する方法がわかりません

4

5 に答える 5

2

これを試して：

var x = document.getElementById('mylist');
var z = x.getElementsByTagName('li');

for (var i = 0; i < z.length; i++) {
    (function(i) {
        var res = z[i].innerHTML;
        z[i].onclick = function() {
            alert(res)
        };
    })(i);
}​

http://jsfiddle.net/sssonline2/UYEa9/

于 2012-05-09T12:08:07.423 に答える
1

JsFiddleの文字列文字列定数デモの代わりにresを識別子として作成してこれを試してください

var x = document.getElementById('mylist');
var z = x.getElementsByTagName('li');

for(i=0;i<z.length;i++){
      var res = z[i].innerHTML;  
      z[i].setAttribute('onclick',"alert('"+res+"');");

}​
于 2012-05-09T12:12:10.507 に答える
0

これは別の方法で行うことができます

var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {  
        lis[i].addEventListener('click', 
            function() {
                console.log('asd');
                alert(this.innerHTML);
            }
            , false);
}

JSFiddleでお試しください

MDNによると、これを行うための現在推奨されている方法はaddEventListenerを使用することです。

于 2012-05-09T12:10:25.550 に答える
0

簡単な解決策

HTML

<ul id="test-list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

JavaScript

var x = document.getElementById( 'test-list' );
var li = x.getElementsByTagName( 'li' );

for( var i = 0; i < li.length; i++ ) {
    li[i].onclick = function() {
        alert( this.innerHTML );
    }
}
于 2012-05-09T12:15:06.230 に答える
0

まず、終了</ul>タグがあることを確認してください。

<ul id="test-list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

onclick次に、 DOM オブジェクトのプロパティまたは次のいずれかを使用しますaddEventListener()。

var x = document.getElementById('mylist');
var z = x.getElementsByTagName('li');

for(i=0;i<z.length;i++){
  z[i].onclick = function() {
    alert(this.innerHTML); // In this scope, "this"
  };                      // means the element that was clicked
}

また

var x = document.getElementById('mylist');
var z = x.getElementsByTagName('li');

for(i=0;i<z.length;i++){
  z[i].addEventListener('click', function() {
    alert(this.innerHTML); // In this scope, "this"
  });                      // means the element that was clicked
}

を使用setAttribute()する必要がある場合は、スコープに細心の注意を払う必要があります。の最後の値はresでしたorange。ブラウザはそれを記憶しています。要素をクリックすると、ブラウザは の現在の値をチェックしてres警告します。使用する場合

setAttribute('onclick', 'alert"' + res '")');

resループの現在の反復での値を取得forし、文字列に挿入します。

于 2015-12-22T19:47:26.237 に答える