javascript - 一个函数处理多个元素

Question

这个问题已经有答案了:

jquery on click ID only works for first output (2 个回答)

已关闭 3 年前。

我的页面上生成了 n 次以下 html 代码

<form class="new_comment">
   <input accept="image/png,image/gif,image/jpeg" id="file" 
   class="file_comment" key=comment_id type="file" name="comment[media]">
   <span class="lds-dual-ring"></span>
   <span class="valid_icon" style="display:none;"></span>
</form>

我有以下 jquery

$(document).ready(function(){
  $('#file').on('click touchstart' , function(){
    $(this).val('');
});

//Trigger now when you have selected any file
$("#file").change(function(e) {
  var data = new FormData();
  console.log (e.target)
  console.log(e.target.files)
  var file = e.target.files
  data.append("image", file[0]);
  $(".lds-dual-ring").css('display', 'inline-block');
  $(".valid_icon").css('display', 'none');
  $.ajax({
      url: 'https://api.imgur.com/3/image',
      headers: { Authorization: "Client-ID {{client-id}}" },
      type: 'POST',
      data: data,
      cache: false,
      contentType: false,
      processData: false,
      success: function(data) {
        $(".lds-dual-ring").css('display', 'none');
        $(".valid_icon").css('display', 'inline-block');
        console.log(data.data.link);
        $('#media_url').val(data.data.link);
      },
      error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
      }
  })
});
});

这段代码运行良好。当用户从桌面上选择图像时，该图像会上传到 imgur 上，并会出现一个验证图标。

它适用于第一种形式的评论，但不适用于页面上的所有其他相同形式。

我也有关于非唯一 id 的警告，我明白为什么我有它，但我不知道如何才能为不确定数量的表单只拥有一个函数或样式类

Answer 1

您说过您了解为什么会收到有关非唯一 ID 的警告，但我会为 future 的查看者简要介绍一下它。

ID(例如，#myId)必须在任何页面上仅出现一次。就像现实生活中的 ID 号一样，它们指的是特定的实体，因此应该只代表单个元素。这也是为什么 ID 的 JavaScript 选择器是单一的 (document.getElementById)。

另一方面，类(例如.myClass)可以出现多次。就像在现实生活中一样，您可以将相似的项目分组并集体引用它们。因此，类的选择器是复数 (document.getElementsByClassName)。

看起来您的代码已经设置为可以处理类——您只需更改选择器即可。由于您的文件输入已经有一个类，因此您只需替换引用该输入的选择器，以便它们引用 class 属性而不是 id。

尝试将 $("#file") 替换为 $(".file_comment")，它应该会停止向您发出警告。