1

私はこれを持っています：

<script language="JavaScript" type="text/javascript">
<!--
var MessAry=new Array();
MessAry[0]='';
MessAry[1]='My Message 1';
MessAry[2]='My Message 2';
MessAry[4]='My Message 3';
MessAry[4]='My Message 4';

function CngMess(obj,id){
 document.getElementById(id).innerHTML=MessAry[obj.selectedIndex];

}
//-->
</script>
</head>

<body>
<select onchange="CngMess(this,'fred');" >
<option >Select</option>
<option >Mess 1</option>
<option >Mess 2</option>
<option >Mess 3</option>
<option >Mess 4</option>
</select>
<div id="fred" ></div>
</body>

しかし、それが「選択フォーム」ではなくリスト（ul、li）になるようにしたいと思います。

つまり、リストアイテムをクリックしたときに、段落（マイメッセージ）を「fred」divで変更する必要があります。

誰か助けてもらえますか？

4

2 に答える 2

1

まず、select要素を次のように再作成しましたul。

<ul id="barney">
  <li>Mess 1</li>
  <li>Mess 2</li>
  <li>Mess 3</li>
  <li>Mess 4</li>
</ul>

次に、インライン ハンドラーの代わりにイベント リスナーを使用する必要があります。つまり、 に相当するものが必要になりますが、onclickそれを HTML ではなく JS に入れたいということです。これには多くの理由がありますが、ここでのケースは、イベント リスナーに渡される MouseEvent オブジェクトを使用したい場合です。イベントはブラウザーごとに異なる動作をするため、イベントを処理するにはクロスブラウザー イベント リスナーが必要です。

function listen(evnt, elem, func) {
    if (elem.addEventListener)  // W3C DOM
        elem.addEventListener(evnt,func,false);
    else if (elem.attachEvent) { // IE DOM
         var r = elem.attachEvent("on"+evnt, func);
         return r;
    }
}

次に、この要素listenでclickイベントを行います。クリックされたイベント ターゲット ( ) がその子ノードと一致ulするまで、の子を繰り返し処理し、その情報を関数の変更された形式に渡します。ulev.targetliCngMess

listen('click', ul, function(ev){
    for (var i = 0, il = this.children.length; i < il; i++) {
        if (ev.target == this.children[i]) {
            CngMess(this, 'fred', i);
        }
    }
});

function CngMess(obj, id, messI) {
    document.getElementById(id).innerHTML = MessAry[messI];
}​

デモを見る

于 2012-03-18T22:47:19.477 に答える
1

これは、IE/NN 4 以降のすべてのブラウザーで動作する最小限の動作バージョンです。関連するイベント オブジェクトを使用して、クリックされた要素を取得し、親 LI を取得してから、LI を反復処理してインデックスを見つけ、コンテンツを置き換えます。フレッドの。

script 要素のlanguage属性は非推奨であり、script 要素内では HTML コメント区切り文字は不要であることに注意してください(1995 年頃から必要ありません)。

<script type="text/javascript">

  var MessAry = ['', 'My Message 1', 'My Message 2','My Message 3','My Message 4'];

  function CngMess(evt, id) {
    var el = evt.target || evt.srcElement;
    var ul = el.parentNode;
    var lis = ul.getElementsByTagName('li');

    for (var i=0, iLen=lis.length; i<iLen; i++) {
      if (lis[i] == el) {
        document.getElementById(id).innerHTML = MessAry[i];
      }
    }
  }
</script>

<ul onclick="CngMess(event, 'fred');">
  <li>Click on one of the phrases below
  <li>Mess 1
  <li>Mess 2
  <li>Mess 3
  <li>Mess 4
</ol>

<div id="fred" ></div> </body>
于 2012-03-18T23:54:18.623 に答える