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

Posted 2023-02-24

【中文标题】将元素 id 从 div 发送到 javascript 文件

【英文标题】：Send element id from div to javascript file

【发布时间】：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 节点...？

【参考方案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')"