学习 Vanilla JavaScript，for 循环

Posted 2023-05-07

【中文标题】学习 Vanilla JavaScript，for 循环

【英文标题】：Learning Vanilla JavaScript, for loop

【发布时间】：2013-02-27 10:30:15

【问题描述】：

我正在尝试学习 Vanilla javascript 或纯 JS，不管你怎么看。我开始学习 jQuery，现在我正在尝试在没有框架的情况下提高我的速度。我通常只用 jQuery 就可以做到这一点，但用纯 JS 很难做到这一点。

var a = $('.entry-content'),i;

for (i=0;i<a.length; i++) 
   var b = a[i].innerhtml;
   var c = document.createElement('div');
   var d = c.id = 'reply_bb';
   var e = d.innerHTML = 'Reply';
   a[i].innerHTML = a[i].appendChild(c);
 

基本上我想做的是将一个元素添加到 var a 元素。

   <div class="entry-content">
     <div>
         Words from a poster or whatever would be in side here
     </div>
   </div>

在javascript之后=

   <div class="entry-content">
     <div>
         Words from a poster or whatever would be in side here
     </div>
      <div id="reply_bb">Reply</div>
   </div>

也因为这是相关的。当动态创建一个元素时，我会使用.click 或.on('click',function() 还是我会怎么做？我想要它，所以当用户单击reply_bb 时，它会附加另一个已经在刚刚隐藏的页面上的元素。

【问题讨论】：

阅读 appendChild 的作用。

【参考方案1】：

这里开始出错了：

var d = c.id = 'reply_bb';
var e = d.innerHTML = 'Reply';

此时d是字符串'reply_bb'。

所以d 没有属性.innerHTML。

---

那么，我不知道你想用这个做什么：

a[i].innerHTML = a[i].appendChild(c);

您要么设置innerHTML，要么附加一个孩子。尝试将 innerHTML 设置为附加子项（即附加的 DOM 元素）的结果是没有意义的。

---

在我看来，你想要的可能是这样的：

var items = $('.entry-content'), replyDiv;

for (var i = 0; i < items.length; i++) 
   replyDiv = document.createElement('div');
   replyDiv.className = 'replyButton';
   replyDiv.innerHTML = 'Reply';
   items[i].appendChild(replyDiv);

---

而且，如果你真的想在没有 jQuery 的情况下这样做，你可以这样做：

var items = document.getElementsByClassName('entry-content'), replyDiv;

for (var i = 0; i < items.length; i++) 
   replyDiv = document.createElement('div');
   replyDiv.className = 'replyButton';
   replyDiv.innerHTML = 'Reply';
   items[i].appendChild(replyDiv);

---

在回答您关于 .on() 与 .click() 的问题时，这取决于。这两个是等价的：

$(item selector).click(fn) 
$(item selector).on('click', fn)

两者都可以在您安装事件处理程序时存在的项目上正常工作。我在这里使用.click() 只是因为它更简洁。

但是，如果您想要事件处理程序的项目尚不存在或将在将来创建，那么您必须使用委托事件处理，您将事件处理程序安装在已经存在的父项上，您不能使用.click() 执行此操作，这样您就可以像这样使用.on()：

$(static parent selector).on('click', '.replyButton', function() 
    // event handler code here
)'

---

其他一些建议：

使用有意义的变量名，例如 replyDiv 和 items，而不是 a、b、c 和 d。 不要在不需要的时候创建中间变量。 id 值必须是唯一的，因此要么生成唯一的 id 名称，要么改用类名（我的代码已切换为类名）。

【讨论】：

添加了有关问题另一部分的信息：.on() 与 .click()。

非常感谢您解释自己并且能够非常友善和理解！我实际上理解了这一切，很抱歉变量是 a b c d 我这样做是为了开始然后命名它们。我不知道这只是一种习惯 :) 你肯定会收到支持并为你检查！

@jfriend00 我在这里问了另一个问题。 ***.com/questions/15353028/… 如果你可以看一下，这可能是另一个简单的答案；）