JQuery到Javascript文档

Fiddle（使用JQuery）——

我知道JQuery是Javascript，但是为了便于讨论，在不需要JQuery这样的js库的情况下，如何用纯Javascript编写以下内容

$(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;
  }
}

---

要用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);    
  }
});

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'）
返回false；
};
对于（变量i=0；i

您遇到的问题是

getElementsByClassName

返回集合，因此不能对集合使用

value

或

onclick

我使用

querySelectorAll

，因为

getElementsByClassName

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

另外，在您的问题中，您有

onClick

，用于所需的事件处理程序

onClick

对于一个较小的性能改进，您可以将

工作流

移出

处理程序

，这样它就不会在每次单击时都获取它，只有在您不打算添加动态

时才这样做。工作流

---

是的，还有。（正如评论中所指出的）

window.onload

与

document ready

不同，

window.onload

将等待图像和媒体被完全加载，因此使用

domcontentload

很好地用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);    
  }
});

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'）
返回false；
};
对于（变量i=0；i

您遇到的问题是

getElementsByClassName

返回集合，因此不能对集合使用

value

或

onclick

我使用

querySelectorAll

，因为

getElementsByClassName

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

另外，在您的问题中，您有

onClick

，用于所需的事件处理程序

onClick

对于一个较小的性能改进，您可以将

工作流

移出

处理程序

，这样它就不会在每次单击时都获取它，只有在您不打算添加动态

时才这样做。工作流

---

是的，还有。（正如评论中指出的）

window.onload

与

documentready

不同，

window.onload

将等待图像和媒体完全加载，因此使用

DOMContentLoaded

jQuery选择器所做的一件事是在调用函数和分配处理程序时尝试抽象“数组”。考虑这样的事情：

$('.preview-site').on('click', function(){
    // code
});

for (var i = 0; i < preview.length; i++) {
    preview[i].addEventListener('click', function() {
        window.open('javascript:document.write("'+ code[i].value[0] +'")', 'Opened Page', 'width=660, height=440');
        return false;
    }
}

这段代码不仅仅是分配click处理程序。在低于jQuery界面的级别上，它迭代

.preview site

元素的数组，并为每个元素分配单击处理程序。有时是一种元素，有时是多种元素。（有时是“无”）jQuery使接口保持不变，而不考虑计数

没有它，您需要明确地处理这种差异。这些值是数组：

var preview = document.getElementsByClassName("preview-site"),
    code = document.getElementsByClassName("workflow");

即使每个元素仅通过该类名找到单个元素，来自

document.getElementsByCassName（）

的结果也是一个数组。因此，即使数组只有一个元素，它仍然是一个数组。您不能将处理程序分配给数组，您需要将其分配给数组中的每个元素。可能是这样的：

$('.preview-site').on('click', function(){
    // code
});

for (var i = 0; i < preview.length; i++) {
    preview[i].addEventListener('click', function() {
        window.open('javascript:document.write("'+ code[i].value[0] +'")', 'Opened Page', 'width=660, height=440');
        return false;
    }
}

for（变量i=0；i

---

当然，在假设每个

preview

元素都存在一个

code

元素之前，您可能需要进行一些检查，以确保两个数组的长度相同。但原理是一样的。您只需要手动计算数组的枚举。

jQuery选择器的一个功能当调用函数和分配处理程序时，请尝试抽象“数组”。

$('.preview-site').on('click', function(){
    // code
});

for (var i = 0; i < preview.length; i++) {
    preview[i].addEventListener('click', function() {
        window.open('javascript:document.write("'+ code[i].value[0] +'")', 'Opened Page', 'width=660, height=440');
        return false;
    }
}

这段代码不仅仅是分配点击处理程序。在比jQuery界面提供的更低的级别上，它迭代

.preview site

元素的数组，并将点击处理程序分配给每个元素。有时是一个元素，有时是多个（有时是无）jQuery使接口保持不变，而不考虑计数

如果没有它，则需要显式处理该差异。这些值是数组：

var preview = document.getElementsByClassName("preview-site"),
    code = document.getElementsByClassName("workflow");

即使每个元素仅通过该类名找到一个元素，来自

document.getElementsByCassName（）

的结果也是一个数组。因此，即使数组只有一个元素，它仍然是一个数组。并且您无法将处理程序分配给数组，您需要将其分配给数组中的每个元素。可能类似于：

$('.preview-site').on('click', function(){
    // code
});

for (var i = 0; i < preview.length; i++) {
    preview[i].addEventListener('click', function() {
        window.open('javascript:document.write("'+ code[i].value[0] +'")', 'Opened Page', 'width=660, height=440');
        return false;
    }
}

for（变量i=0；i