Question

我正在做一些自学的html / js。我正在尝试制作一个简单的图像上传器，我正在遵循的教程提供了以下html

<section id="image" class="button">
    <button>Add image</button>
    <input type="file" accept="image/*">
  </section>

在CSS中，我有

section.button input[type="file"] {
    display: none;
  }

隐藏选择文件按钮。它要求设置javascript，以便在单击添加图像按钮时调用隐藏按钮的.click方法。

它说可以通过获取对隐藏元素的引用来完成。我在提供的视频中找不到任何说明如何执行此操作的内容。我在youtube上看过视频，但它们似乎都给隐藏的输入一个ID，例如，

<input type="file" id = "file" accept="image/*">

所提供的html文件中是否存在错误，或者可以在不提供ID的情况下获取对隐藏元素的引用？

谢谢

Answer 1

您的CSS选择器字符串

section.button input[type="file"]

已经选择了您需要的输入-您要做的就是将选择器字符串传递给querySelector，然后您将返回对该<input>的引用：

const input = document.querySelector('section.button input[type="file"]');
input.click();

选择器字符串的含义是：选择一个属性为input且属性为type的{{1}}，它是一个类为{{ 1}}。（例如，如果您想选择file而不是section，则可以遵循完全相同的模式-只需使用button而不是<button>：{ {1}}）

Answer 2

有多种方法可以从JavaScript获取对DOM元素的引用。您可以使用document.querySelector()并为其指定CSS选择器。这将为您提供与选择器匹配的第一个元素。这样，您可以使用#myId这样的选择器通过id来获取数据，或者使用input[type="file"]这样的选择器来通过输入类型来获取信息。

或者您可以直接使用document.getElementById()并为其指定元素的唯一ID。

要将事件侦听器附加到按钮上并调用隐藏输入的click方法，请使用addEventListener('click', handler)，在处理程序中，使用上述方法查找输入，然后在其上调用click()方法它：

console.log(document.getElementById('file'));
console.log(document.querySelector('#file'));
console.log(document.querySelector('input[type="file"]'));

document.querySelector('#image button').addEventListener('click', event => {
  document.querySelector('input[type="file"]').click();
});

section.button input[type="file"] {
  display: none;
}

<section id="image" class="button">
  <button>Add image</button>
  <input type="file" accept="image/*" id="file">
</section>

Answer 3

您可以使用nextElementSibling从按钮中找到隐藏的输入：

function callback(){
         tinymce.activeEditor.execCommand('ep_shortcode_command');
     }
     QTags.addButton("list_buttons_shortcode","Add shortcode",callback);

document.querySelector('#image button').addEventListener('click', function() {
  this.nextElementSibling.click();
})

section.button input[type="file"] {
  display: none;
}

获取对javascript中元素的引用

3 个答案: