4

我正在创建一个基本的图像上传脚本，当我点击 case-img1 时，它基本上会触发隐藏的文件输入，选择文件后，它将下一个 div(case-img2) 类(img-upload-enable) 更改为允许选择下一个文件，但是当我在更改类后单击 div 时它不起作用


<table id="choose-photos-tb">
 <tr>
   <td><div id="case-img1" class="img-upload-enable">+</div></td>
   <td><div id="case-img2" class="img-upload-disable">+</div></td>
   <td><div id="case-img3" class="img-upload-disable">+</div></td>
   <td><div id="case-img4" class="img-upload-disable">+</div></td>
   <div id="case-image-inputs">
     <input type="file" name="case_img1" id="case_img1" accept="image/*">
     <input type="file" name="case_img2" id="case_img2" accept="image/*">
     <input type="file" name="case_img3" id="case_img3" accept="image/*">
     <input type="file" name="case_img4" id="case_img4" accept="image/*">
   </div>
 </tr>
</table>

这是Jquery代码


$(document).ready(function () {
    $(document.body).on('click', '.img-upload-enable', function(){
        var id = $(this).attr("id");
        if (id == "case-img1"){
            $('#case_img1').trigger('click');
            $("#case_img1").change(function() {
                $('#case-img2').attr("class", "img-upload-enable");
            });
        }
    });
});
4

2 回答 2

5

您的逻辑中的问题是因为在第一个循环之后条件：id == "case-img1"永远不会为真。

您可以通过使用公共类来解决此问题并提高逻辑的 DRYness。然后，您可以通过索引将每个文件触发器与文件输入相关联。

另请注意，您的 HTML 无效；div不能是 的孩子tr。它需要在自己的单元格内。

说了这么多，试试这个：

$(document).ready(function() {
  var $triggers = $('.case-img-trigger');
  var $inputs = $('.case_img');
  
  $(document).on('click', '.img-upload-enable', function() {
    var index = $triggers.index(this);
    var $target = $inputs.eq(index).trigger('click');
  });
  
  $inputs.on('change', function() {
    var index = $inputs.index(this);
    $triggers.eq(index + 1).toggleClass('img-upload-disable img-upload-enable');
  });
});
.case-img-trigger {
  display: inline-block;
}
.img-upload-enable {
  border: 1px solid #C00;
  padding: 0 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="choose-photos-tb">
  <tr>
    <td>
      <div class="case-img-trigger img-upload-enable">+</div>
      <div class="case-img-trigger img-upload-disable">+</div>
      <div class="case-img-trigger img-upload-disable">+</div>
      <div class="case-img-trigger img-upload-disable">+</div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="case-image-inputs">
        <input type="file" name="case_img1" class="case_img" accept="image/*" />
        <input type="file" name="case_img2" class="case_img" accept="image/*" />
        <input type="file" name="case_img3" class="case_img" accept="image/*" />
        <input type="file" name="case_img4" class="case_img" accept="image/*" />
      </div>
    </td>
  </tr>
</table>

于 2019-09-05T08:24:43.603 回答
0

您可以利用将正确的文件选择字段和下一步按钮绑定在一起来启用使用data-*属性并使用它们来触发单击并更改类。

$(document.body).on('click', '.img-upload-enable', function(){
    var id = $(this).data("upload");
    $(id).trigger("click");
});

$(document.body).on("change","input[type=file]",function(){
   var id = $(this).data("next");
   $(".img-upload-enable").removeClass("img-upload-enable").addClass("img-upload-disable")
   $(id).removeClass("img-upload-disable").addClass("img-upload-enable");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="choose-photos-tb">
 <tr>
   <td><div id="case-img1" class="img-upload-enable" data-upload="#case_img1">+</div></td>
   <td><div id="case-img2" class="img-upload-disable" data-upload="#case_img2">+</div></td>
   <td><div id="case-img3" class="img-upload-disable" data-upload="#case_img3">+</div></td>
   <td><div id="case-img4" class="img-upload-disable" data-upload="#case_img4">+</div></td>
   <div id="case-image-inputs">
     <input type="file" name="case_img1" id="case_img1" accept="image/*" data-next="#case-img2">
     <input type="file" name="case_img2" id="case_img2" accept="image/*" data-next="#case-img3">
     <input type="file" name="case_img3" id="case_img3" accept="image/*" data-next="#case-img4">
     <input type="file" name="case_img4" id="case_img4" accept="image/*">
   </div>
 </tr>
</table>

于 2019-09-05T08:29:10.180 回答