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，但你想把它放在你的 JS 中，而不是你的 HTML 中。这有很多原因，但这里的情况是我们想要使用传递给事件侦听器的 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举办一个活动。我们将遍历 的子节点，直到被单击的事件目标 ( )匹配该子节点并将信息传递给函数的修改形式：clickululev.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 以查找索引并替换内容弗雷德。_

请注意，脚本元素的语言属性已被弃用，并且在脚本元素中不需要 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 回答