Question

我有一个非常棘手的问题，我将举一个例子。我正在做的是，我基本上是在元素之前添加元素并通过递增来区分它们（出于某些原因，我需要以这种方式进行此操作），然后可以单击任何元素并将其删除。

这只是其外观的愚蠢示例：

    $(function () {
    var i = 0;
        $("#new").click(function(){
            i++;
            $("#container").prepend("<div class='prepended "+i+"'>blah blah blah</div>")


            $(".prepended").click(function(){
                $(this).remove();
            });
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="new">click here</button>
    <div id="container"></div>

删除任何元素时，我都需要设法使递增的“ i”变量填充丢失的元素。我不知道如何用语言解释，所以我将在“代码”中解释：

假设我添加了6个元素，因此“ i”变量现在为6：

if(deleted_divs_class == 1)
{
    i = 1; // fill the missing "1"
    next_click_i = 6; // variable i on next click should be 6 in order to continue in right order
}
else if (deleted_divs_class !== 1 || 6) // deleted element is somewhere from middle so it's not 1 or 6
{
    i = fill_missing_number; // fill the removed number
    next_click_i = 6; // continue in right order
}
else
{ 
 i--;
 // deleted element is the last element of line so continue normally by incrementing
}

我知道如何获取Deleted_divs_class变量并应用next_click_i变量，但我不知道如何使整个过程动态地工作

我知道这个问题可能看起来很奇怪，但这只是一个例子，它是更大的代码的一部分，我只需要对这种“增量”进行逻辑运算即可使整个事情像我一样正常工作需要。

所以我只是弄不清楚逻辑。

Answer 1

我想我已经创建了您要查找的代码，但是不确定我是否正确理解了您的问题。看这段代码。这是您想要的吗？

    $(function () {
        var missed=[]; //Here will be stored missed numbers
        var i = 0;
        $("#new").click(function(){
            var n=0;
            if(missed.length>0) {
                n=missed.shift(); //get next missed number from the array
            } else
                n=++i;

            $("#container").prepend("<div data-i='"+n+"' class='prepended "+n+"'>"+n+"blah blah blah</div>")


        });
        $('#container').on('click',".prepended",[], function(){
                missed.push($(this).data('i')); //save removed number into missed numbers array
                $(this).remove();
          });    
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="new">click here</button>
    <div id="container"></div>

Answer 2

要回填已删除的i值，您需要存储它们。在此示例中，deleted_i保留所有已删除的值，并在创建新元素时首先尝试从那里检索新值。如果为空，则默认为递增i的值。

还请注意，click事件现在绑定到了容器，因此仅触发一次-在您的示例中，它被重新绑定到所有.prepended元素，因此当您单击一个元素时，它触发该功能的次数是循环运行至今的次数。

$(function () {
  var i = 0,
    deleted_i = []
    
  $("#new").click(function(){
    var idx;
    console.log(deleted_i)
    if(deleted_i.length) idx = deleted_i.shift() //grab the first deleted index, if one exists
    else idx = ++i;
    $("#container").prepend("<div data-index='"+idx+"' class='prepended "+idx+"'>blah blah blah this is "+idx+"</div>")
  });
  
  $("#container").click(function(e){
    var $target = $(e.target)
    if($target.hasClass('prepended')){
      $target.remove();
      deleted_i.push($target.attr('data-index'))
    }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="new">click here</button>
    <div id="container"></div>

javascript / jquery增量检查

2 个答案: