Question

我有一个文件选择器，它根据文件使用缩略图填充div。现在我有多个按钮和div包含相同的类名。我每次选择主按钮时使用的是，var thisButton = $(event.target);转换为：

var appendThis = thisButton.closest('.insurance').find(".attachmentCont");
            appendThis.append('<div class="singleImg"><img src="'+attachment.url+'" width="100px"/><input type="hidden" class="fileURL" value="'+attachment.id+'"/><span class="removeImg remove"> X </span></div>');
            $(".removeImg").bind('click', function(){
               $(this).parent().remove(); 
            });

appenThis等于包含另一个div的div中的按钮attachmentCont按钮和div都在parent div范围内，div.insurance有多个div.insurance 1}}容器。我的问题是在使用thisButton.closest('.insurance').find(".attachmentCont");时，它始终关注首先选中的.attachmentCont div。因此，如果我选择了第1部分，则会填充图像。如果我选择第2部分，当第2部分中的div.attachmentCont也应获得append()时，第1部分仍会获得该图像。

建议还是想法？

HTML示例：

<div class="notes-section insurance">
    <span><b>General </b></span><textarea style="width:97%;" rows="5" cols="50" class="insurance-description fields contractor_insurance_description" placeholder="...."></textarea>
    <input type="date" class="expiration-date" placeholder="Expiration Date">
    <br>
   <span>Your</span>
    <div class="attachmentCont">
    </div>
    <br>
    <input type="button" class="upload_image_button" value="Attach Documents" style="width:150px;">
</div>

Answer 1

问题在于：

我的失明并未发现包含selected按钮的函数与appended数据的函数没有任何关联。因此，我所要做的就是将我的var thisButton外部移到父类中。

谢谢大家的帮助。

<强>解决方案：

var thisButton

$('.upload_image_button').on('click', function( event ){
      thisButton = $(event.target);
      event.preventDefault();
});
....
function...({
      var appendThis = thisButton.closest('.insurance').find(".attachmentCont");
      appendThis.append('<div class="singleImg"><img src="'+attachment.url+'" width="100px"/><input type="hidden" class="fileURL" value="'+attachment.id+'"/><span class="removeImg remove"> X </span></div>');
      $(".removeImg").bind('click', function(){
        $(this).parent().remove(); 
      });
});

问题找到具有相同类的特定div - JQuery

1 个答案: