更改类后，单击功能不起作用

debugcn 发表于 Dev

吸血鬼

我正在创建一个基本的图像上传脚本，当我单击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");
            });
        }
    });
});

罗里·麦克罗森（Rory McCrossan）

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

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

另请注意，您的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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。