2

我正在尝试学习 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 时，它会附加另一个已经在刚刚隐藏的页面上的元素。

4

1 回答 1

7

这里开始出错了：

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()vs的问题.click()时，这取决于。这两个是等价的：

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

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

但是，如果您想要事件处理程序的项目尚不存在或将在未来创建，那么您必须使用委托事件处理，您将事件处理程序安装在已经存在的父级上，您不能这样做.click()所以你会这样使用.on()：

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

其他一些建议：

  1. 使用有意义的变量名称，例如replyDivand items、 not a、b、c和d。
  2. 不需要时不要创建中间变量。
  3. id 值必须是唯一的，因此要么生成唯一的 id 名称，要么改用类名（我的代码切换到类名）。
于 2013-03-12T02:34:22.290 回答