javascript для вопроса, связанного с циклом - PullRequest
Новая
       13

javascript для вопроса, связанного с циклом

0 голосов
/ 28 января 2011

Я пытаюсь использовать для цикла в качестве подстановки списка все 

function init(){
    new dEdit($('editBox'));
    new dEdit($('editBox2'));
    new dEdit($('editBox3'));
   }

относительно 

function init(){
           for(var i = 0; i < 1000; i++){
                                new dEdit($('editBox'+i));
           }

}

но, похоже, у меня это не работает. Как это исправить?

Спасибо

Ниже приведен полностью рабочий код без "для цикла" 

<?xml version="1.0" encoding="ISO-8859-1"?>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title> New Document </title>
  <meta name="title" content="" />
  <meta name="author" content="0xs.cn" />
  <meta name="subject" content="" />
  <meta name="language" content="zh-cn" />
  <meta name="keywords" content="" />
  <style type="text/css" >
   /* default css rule */
   body { font: 12px "Verdana"; }
  </style>
  <script type="text/javascript" >
   // shortcut
   function $(s){
    return typeof s == 'object'?s:document.getElementById(s);
   }
   var dEdit = function(el){
    var me = this;
    this.save = function (txt){
     el.innerHTML = txt;
    };

    this.edit = function (e){
     var e = e || event;
     var target = e.target || e.srcElement;
     if(target.tagName.toLowerCase() == 'input'){
      return;
     }
     var ipt = document.createElement('input');
     ipt.value = target.innerHTML;
     ipt.onkeydown = function(){
      if((arguments[0]||event).keyCode==13){
       me.save(this.value);
      }
     };
     ipt.onblur = function(){
      me.save(this.value);
     };
     target.innerHTML = '';
     target.appendChild(ipt);
     ipt.focus();
    };

    el.onclick = this.edit;
   }; 
   function init(){
    new dEdit($('editBox'));
    new dEdit($('editBox2'));
    new dEdit($('editBox3'));
   }
   window.onload = init;
  </script>
 </head>

  <body>
   <span id="editBox">This is sample text.</span> <br/><br/>
   <span id="editBox2">This is sample text 222.</span> <br/><br/>
   <span id="editBox3">This is sample text 333.</span>
  </body>

 </html>

Ответы [ 5 ]

2 голосов
/ 28 января 2011

Измените идентификаторы на ваших тегах span на «editBox0», «editBox1» и «editBox2». Кроме того, вы отправили этот же вопрос не 20-30 минут назад, и тогда кто-то дал вам правильный ответ.

1 голос
/ 28 января 2011

Проблема в том, что init вызывает исключение для первого значения, так как editBox0 не существует.Чтобы это исправить, вы можете заключить каждую итерацию цикла в попытку / перехват.

например, 

function init(){
    for(var i = 0; i < 1000; i++){
        try {
            new dEdit($('editBox'+i));
        } catch (e) {}
    }
}

Таким образом, если идентификатор не определен, скрипт все равно запускается.Кроме того, вы должны изменить <span id="editBox"> на <span id="editBox0"> или <span id="editBox1">, если вы собираетесь назначить его в цикле.

1 голос
/ 28 января 2011

Ваш цикл изменяется от 0 до 1000, и editBoxN не является допустимым селектором идентификатора, поэтому вы заканчиваете с 

new dEdit($('editBox0'));
new dEdit($('editBox1'));
new dEdit($('editBox2'));
...

изменением первого идентификатора editBox, переменной цикла и добавляете хеш в селектор jquery для соответствияидентификаторы 

function init(){
       for(var i = 1; i < 1000; i++){
           new dEdit($('#editBox'+i));
       }
 }
1 голос
/ 28 января 2011

Среди других вопросов, например, что происходит при вызове dEdit(...) для пустого объекта jQuery ...

Вам нужен префикс #, чтобы выбрать идентификатор:

$('#editBox2')

1 голос
/ 28 января 2011

Вам необходимо добавить префикс # для селекторов идентификаторов.Измените свой код на: 

function init(){
           for(var i = 0; i < 1000; i++){
                                new dEdit($('#editBox'+i));
           }

}
...