将元素 id 从 div 发送到 javascript 文件答案

【问题标题】：Send element id from div to javascript file将元素 id 从 div 发送到 javascript 文件
【发布时间】：2020-07-13 22:56:17
【问题描述】：

我正在尝试使用 javascript 触发文件输入。我正在使用 Django formset，并且我已经获得了当前我的 Javascript 函数的输入字段的 ID：

$(document).ready(function(){
    $("#show-image-upload-inputs").click(function(){
      $("#image-upload-div").toggle();
    });

    function open_input (id,input_id) {
      $(this.id).on("click", function () {
        $(this.input_id).trigger("click");
      });
    }
  });

在我的 HTML 中，我使用 onclick 将它们传递给函数：

<div id="file-0-selector" class="add-image" onclick="open_input(this.id,document.getElementById('id_form-0-image'))"><i class="mt-2 fas fa-plus fa-5x"></i></div>

但是，当我点击它时，我没有看到上传框打开，我想知道如何实现这一点。我已经从我的表单集中获取了图像输入字段，并且 id 似乎是正确的。

提前致谢。

【问题讨论】：

嗨，你可以用vanilla js吗？
open_input 只是绑定另一个“点击”处理程序？
$(this.id) 和 $(this.input_id) 真的正确吗？ AFAICT 您的内联 JS 将 id 作为字符串传递，input_id 作为 DOM 节点（JS，而不是 jQuery）传递。但是要将 id 用作 jQuery 选择器，您应该使用 $('#' + id)，而不是 $(this.id)。我不知道$(this.input_id) 会做什么，因为input_id 是一个JS DOM 节点...？

标签： javascript jquery django django-forms django-templates

【解决方案1】：

您的open_input 函数只是绑定了另一个点击处理程序，您应该删除它并在 jQuery 中按 id 选择一个元素，您需要在 id 前面加上 # 前缀，并且您不需要使用 @987654323 访问变量@。

function open_input(input_id) {
  $("#" + input_id).trigger("click");
}

现在你的 onclick 变得更简单了，因为你不需要选择元素，你只需要传递它的 id

onclick="open_input('id_form-0-image')"

【讨论】：