Question

我有这个：

<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中更改段落（我的消息）。

有人可以帮忙吗？

Answer 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会在此click元素上发生ul事件。我们将迭代ul的子项，直到事件目标（ev.target），即被点击的li与该子节点匹配，并将信息传递给修改后的表单您的CngMess功能：

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];
}

如何更改段落文本onclick列表项？

1 个答案:

See demo