JavaScriptID转换为变量

我的html表单工作得很好，javascript工作得很好……唯一的问题是我显然不想重复代码15次，所以我需要将id拉入变量中

只要尝试从更改后提交的表单中获取三个id即可。我的身份证，我的身份证，我的输入证，就是这样。我已经尝试了数千种可能的语法变体，在这里查找了数百个答案，但没有任何东西不符合我的需要。我显然错过了什么。感谢所有的帮助

以下是简化的html表单：

<form action="#” method=" post " id=”my_form_id”>
    <input type="file " id="my_input_id "><br>
    <button type="submit " value="Upload " id="my_btn_id ">Upload</button>
</form> 

$（this.form）

将返回包含触发事件的输入元素的表单。然后，您可以使用它来查找所需的其他元素

var form = $(input.form);
var img = form.next("img");
var btn = form.find("input:submit");

不需要获取它们的ID，只需使用jQuery对象本身即可。例如

img.attr("src", e.target.result);
btn.show();

完整代码：

function readURL(input) {
    var form = $(input.form);
    var img = form.next("img");
    var btn = form.find("input:submit");    

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            img.attr('src', e.target.result);
            btn.show();
        }
        reader.readAsDataURL(input.files[0]);
    }
}

$("input[type=file]").change(function() {
    readURL(this);
});

$（this.form）

将返回包含触发事件的输入元素的表单。然后，您可以使用它来查找所需的其他元素

var form = $(input.form);
var img = form.next("img");
var btn = form.find("input:submit");

不需要获取它们的ID，只需使用jQuery对象本身即可。例如

img.attr("src", e.target.result);
btn.show();

完整代码：

function readURL(input) {
    var form = $(input.form);
    var img = form.next("img");
    var btn = form.find("input:submit");    

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            img.attr('src', e.target.result);
            btn.show();
        }
        reader.readAsDataURL(input.files[0]);
    }
}

$("input[type=file]").change(function() {
    readURL(this);
});

有很多方法可以做到这一点

$("#my_input_id1, #my_input_id2, #my_input_id3").on("change",function(){
   var inputItem = $(this);  
   readURL(inputItem);
});

您还可以创建变量。例如：

<input type="file" class="inputItem" data-img="my_img_id1" data-btn="my_btn_id1">
<input type="file" class="inputItem" data-img="my_img_id2" data-btn="my_btn_id2">
<input type="file" class="inputItem" data-img="my_img_id3" data-btn="my_btn_id2">

我希望这能帮助你，或者为你指明正确的方向

有很多方法可以做到这一点

$("#my_input_id1, #my_input_id2, #my_input_id3").on("change",function(){
   var inputItem = $(this);  
   readURL(inputItem);
});

您还可以创建变量。例如：

<input type="file" class="inputItem" data-img="my_img_id1" data-btn="my_btn_id1">
<input type="file" class="inputItem" data-img="my_img_id2" data-btn="my_btn_id2">
<input type="file" class="inputItem" data-img="my_img_id3" data-btn="my_btn_id2">

---

我希望这能帮助你，或者为你指明正确的方向

ID应该是唯一的，你不能在多种形式中使用相同的ID。是的，我知道这一点。这是一种形式。还有14个，它们都有唯一的ID。ID应该是唯一的，你不能在多种形式中使用相同的ID。是的，我知道这一点。这是一种形式。还有14个，他们都有独特的ID。我真的很感谢你的帮助。事实上，我已经看了3天了，我不知道在哪里做这些改变。如果可以在我的代码中显示您的更改，那就太棒了。如果没有，没关系。我明天睡觉去看看我真的很感谢你的帮助。事实上，我已经看了3天了，我不知道在哪里做这些改变。如果可以在我的代码中显示您的更改，那就太棒了。如果没有，没关系。我明天睡觉去看看