javascript - 如何在使用 Jquery 删除许多 DIV 元素时重置计数和修改类名

Question

我有一个 div 元素，每个元素都有一个删除按钮，就像这个例子:

<div class="elfile_1 fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(1)"><i class="fa fa-times" aria-hidden="true"></i></button></div>
<div class="elfile_2 fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(2)"><i class="fa fa-times" aria-hidden="true"></i></button></div>
<div class="elfile_3 fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(3)"><i class="fa fa-times" aria-hidden="true"></i></button></div>

<script>
 function delete_file(idx){
  $('.elfile_'+idx).remove();
 }
</script>

效果很好，但现在我想重置这些元素的数量，所以我尝试更改为:

function delete_file(idx){
  $('.elfile_'+idx).remove();
  var inputs = $(".fcot");

  for(var i = 0; i < inputs.length; i++){ 
    $(".fcot").each(function(){              
       $(this).attr('class',$(this).attr('class').replace(/\belfile.*?\b/g, ''));
       $(this).addClass('elfile_'+i);

       $(this).find('button').each(function() {
           $(this).attr('onclick', 'delete_file('+i+')');
       });
    });
  }
}

但是，例如，当我删除第二个元素时它不起作用，因为我得到了这个:

<div class="fcot  elfile_1">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(1)"><i class="fa fa-times" aria-hidden="true"></i></button></div>
<div class="fcot  elfile_1">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(1)"><i class="fa fa-times" aria-hidden="true"></i></button></div>

我想得到这个:

<div class="fcot  elfile_1">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(1)"><i class="fa fa-times" aria-hidden="true"></i></button></div>
<div class="fcot  elfile_2">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(2)"><i class="fa fa-times" aria-hidden="true"></i></button></div>

我该如何解决？

我需要你的帮助。

Answer 1

如果您使用计数器只是为了了解需要删除的元素，那么请相信我……根本不要这样做。有一种更简单的方法。

在 onclick 中传递“this”上下文并在 javascript 中使用它。

  function delete_file(me) {
    $(me).closest('div.fcot').remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(this)"><i class="fa fa-times" aria-hidden="true">a</i></button></div>
<div class="fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(this)"><i class="fa fa-times" aria-hidden="true">b</i></button></div>
<div class="fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(this)"><i class="fa fa-times" aria-hidden="true">c</i></button></div>

注意:

我会建议保持代码干净并将 javascript 和 HTML 分开。例如:

HTML:

<div class="fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm some-button-name"><i class="fa fa-times" aria-hidden="true"></i></button></div>
<div class="fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm some-button-name"><i class="fa fa-times" aria-hidden="true"></i></button></div>
<div class="fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm some-button-name"><i class="fa fa-times" aria-hidden="true"></i></button></div>

Javascript:

$(function(){ //ready function to make sure DOM is loaded
    $('.some-button-name').click(function(){
          $(this).closest('div.fcot').remove(); 
     });  
});

脚本中的问题

如果以防万一，您想按照自己的方式(困惑的方式:))，那么您的代码的问题是，您有两个循环 1) for 和 2) foreach。 i 对于导致问题的 foreach 的单次迭代保持不变。 foreach() 每次都被传递一个数组索引和一个对应的数组值。所以使用它:

function delete_file(idx){
  $('.elfile_'+idx).remove();
  var inputs = $(".fcot");

  //for(var i = 0; i < inputs.length; i++){ 
    $(".fcot").each(function(i,v){              
       $(this).attr('class',$(this).attr('class').replace(/\belfile.*?\b/g, ''));
       $(this).addClass('elfile_'+ (i + 1)); // i + 1 here since index starts from 0

       $(this).find('button').each(function() {
           $(this).attr('onclick', 'delete_file('+ (i + 1) +')');
       });
    });
  //}
}

fiddle link我使用 stackoverflow 已经有一段时间了，所以不确定我是否可以在一个答案中包含两个片段，因此添加了 fiddle 链接。如果可能的话，如果有人可以编辑答案并在上面添加 fiddle 内容，那就太好了。 :)