JQuery到Javascript Document.Write

Question

小提琴(使用JQuery) - http://jsbin.com/ponikasa/1/edit

我知道JQuery是Javascript,但是为了一个参数,你如何在纯Javascript中编写以下内容而不需要像JQuery这样的js库？

$(document).ready(function() {
  $('.preview-site').on('click', function(){
    window.open('javascript:document.write("'+ $('.workflow').val() +'")', 'Opened Page', 'width=660, height=440');
    return false;
  });
});

我尝试过这个,但是没有用.
任何帮助是极大的赞赏.

window.onload = function() {
  var preview = document.getElementsByClassName("preview-site"),
      code = document.getElementsByClassName("workflow")[0].value;

  preview.onClick = function() {
    window.open('javascript:document.write("'+ code = +'")', 'Opened Page', 'width=660, height=440');
    return false;
  }
}

Answer 1

那么用javascript编写你会做以下事情

document.addEventListener('DOMContentLoaded', function() {
  var previewSite = this.querySelectorAll('.preview-site');

  var handler = function() {
    var workflow = document.querySelector('.workflow')
    window.open('javascript: document.write(' + workflow.value + ')', 'Opened Page', 'width=660, height=440')
    return false;
  };

  for( var i = 0; i < previewSite.length; i++) {
    previewSite[i].addEventListener('click', handler);    
  }
});

您遇到的问题是getElementsByClassName返回一个集合,因此您无法在集合中使用value或onclick.

我使用,querySelectorAll因为它更容易,并有几乎更好的支持getElementsByClassName

我通常不会回答这样的问题,但我非常支持任何使用jQuery的人,他们希望真正学习javascript这是自我

另外,在你的问题中,你有onClick,你想要的事件处理程序onclick

对于一个小的性能改进,你可以移动workflow出来的handler,这样就不会获取它的每次点击,只有做到这一点,如果你不打算添加动态.workflow

是的,还有.(正如评论中所指出的) window.onload不一样document ready,window.onload会等待图像和媒体完全加载,所以使用DOMContentLoaded