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

Posted 2023-05-07

【中文标题】更改类后单击功能不起作用

【英文标题】：Click function is not working after changing the class

【发布时间】：2020-01-08 02:29:39

【问题描述】：

我正在创建一个基本的图像上传脚本，当我单击 case-img1 时，它基本上会触发隐藏的文件输入，选择文件后，它会更改下一个 div(case-img2) class(img-upload-启用）以允许选择下一个文件，但是当我在更改类后单击 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");
            );
        
    );
);

【问题讨论】：

@empiric 所有的 id 都是唯一的，但不是类

点击第二个加号时你期望发生什么？您仅在您的条件下检查 (id == "case-img1") ，这对于第二个元素不正确。或者你只是在这里省略了一些代码？附言无视我之前的评论，我看错了

【参考方案1】：

您的逻辑中的问题是因为在第一个循环之后条件：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>

【讨论】：

如果change 函数与 OP 逻辑相关，则您缺少该函数，您的脚本会在单击时立即启用下一个输入，而不是在将文件添加到输入之后

谢谢。我把它放在错误的事件下。答案已更新

谢谢，我是新手，我会逐步理解它

没问题。使这项工作的重要方法是index() 和eq()

eventListener 是如何工作的？事件发生时是否检查单击对象的类别？还是在定义侦听器时存储具有给定类的所有对象？我想到了这个问题，因为当我们定义这个监听器时，这个例子中我们想要改变它的类的下一个对象没有触发类。 @RoryMcCrossan

【参考方案2】：

您可以将正确的文件选择字段和下一步按钮绑定在一起，以启用使用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>