（Javascript 和 Html）函数执行另一个未被告知执行的功能

Question

正在构建一个表单并有 2 个文件输入，我打算（一旦文件上传）将输入容器的背景设置为上传的图像，

我使用标签隐藏默认按钮并将其更改为我自己的

这是输入之一及其容器

<div class="input_container" id="img_A">
  <input onchange="changeA(event)" class="file_input" name="fileA" type="file">
  <label for="file_input">
    <img src="../images/add_icon.png" id="img_add">
  </label>
</div>

第二个

<div class="input_container" id="img_B">
  <input onchange="changeB(event)" class="file_input" name="fileB" type="file">
  <label for="file_input">
    <img src="../images/add_icon.png" id="img_add">
  </label>
</div>

和js函数

function changeA(event){
  var getImagePathA = URL.createObjectURL(event.target.files[0]);
  $('#img_A').css('background-image', 'url(' + getImagePathA + ')');
}
function changeB(event){
  var getImagePathB = URL.createObjectURL(event.target.files[0]);
  $('#img_B').css('background-image', 'url(' + getImagePathB + ')');
}

但结果是，当我使用第二个输入时，它将背景设置为上传的图像，但第一个框的图像而不是我单击的图像

当我用警报测试这个时，第二个输入似乎正在运行 changeA(event) 而不是 changeB(event)

提前感谢您提供的任何帮助！

Answer 1

看起来您正在使用相同的../images/add_icon.png图像文件。 所以当你点击第二个输入时，它仍然指向../images/add_icon.png 。

你应该试试：

<div class="input_container" id="img_A">
  <input onchange="changeA(event)" class="file_input" name="fileA" type="file">
  <label for="file_input">
    <img src="../images/image_file_A.png" id="img_add">
  </label>
</div>

<div class="input_container" id="img_B">
  <input onchange="changeB(event)" class="file_input" name="fileB" type="file">
  <label for="file_input">
    <img src="../images/image_file_B.png" id="img_add">
  </label>
</div>