Как изменить текст абзаца на элемент списка? - PullRequest
Новая
       25

Как изменить текст абзаца на элемент списка?

1 голос
/ 19 марта 2012

У меня есть это: 

<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).

Другими словами, я хочуабзац (Мое сообщение) для изменения в div "fred" при нажатии на элемент списка.

Может ли кто-нибудь помочь?

Ответы [ 2 ]

1 голос
/ 19 марта 2012

Вот минимальная рабочая версия, которая будет работать во всех браузерах начиная с IE / NN 4. Она использует связанный объект события, чтобы получить элемент, по которому щелкнули, получает родительский LI, затем перебирает LI, чтобы найти индекс изамените содержимое Fred .

Обратите внимание, что атрибут language для элементов сценария устарел и разделители комментариев 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>
1 голос
/ 19 марта 2012

Во-первых, я воссоздал ваш элемент 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];
}​

См. Демонстрацию

...