这段代码在纯/本地JavaScript中的等效代码是什么？

Question

<label class="file">File</label>
<input class="none" type="file">

jQuery:

$('.file').click(function(){ $('.none').click();});

- user6302777

---

你甚至不需要使用任何JS来实现这个效果，最好的选择就是将你的输入包裹在<label>标签中。https://jsfiddle.net/ehp5v1rm/ 这就是正确的做法。 - A. Wolff

Answer 1

你可以尝试这个。

 var _file = document.getElementsByClassName('file')[0]; //Return a NodeList
_file.onclick = function(){
  document.getElementsByClassName('none')[0].click();
}

jsFiddle

编辑

如果有多个具有相同类的元素

var _file = document.getElementsByClassName('file'); //Return a NodeList
var _none =  document.getElementsByClassName('none');
for(var x = 0;x<_file.length;x++){
  (function(x){   //Creating closure 
   _file[x].addEventListener('click',function(){
   console.log(x)
     document.getElementsByClassName('none')[x].click();
   })
 }(x))
}

演示2

- brk

---

如果有多个具有类file和none的元素会怎样？ - Tushar

OP没有提到多个类。如果是这样，那么必须循环并添加addEventListener。 - brk

$('.none').click(); 和 .trigger('click') 是一样的，都会在所有元素上触发事件。演示fiddle，所以您应该在所有 document.getElementsByClassName('none') 上调用 .click()（嵌套循环）。 - Bogdan Kuštan

getElementsByClassName 返回的是 HTMLCollection，而不是 NodeList（在访问和性能方面有很大的区别）。 - Aloso

Answer 2

这可能是最准确的等价物：

document.querySelector(".file")
    .addEventListener("click", function(){
  document.querySelector(".none").click();
});

对于.click()的更跨浏览器替代方案：如何触发JavaScript事件点击

- Aloso