javascript/jquery增量检查
javascript/jquery增量检查
提问于 2018-10-18 03:43:51
我有一个非常微妙的问题，我来举个例子。我所做的是，我基本上是预先添加元素，并通过递增来区分它们(出于某些原因，我需要这样做)，然后可以选择单击任何元素并将其删除。
这只是一个看起来很愚蠢的例子：
$(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变量，但我不知道如何让整个过程动态工作
我知道这个问题可能看起来很奇怪，但这只是一个例子，它是更大的代码的一部分，我只需要对这种“增量”进行逻辑处理，以便让整个事情按照我需要的方式正常工作。
所以我就是搞不懂逻辑。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-10-18 04:41:01
我想我创建了你要找的代码，但我不确定我是否正确理解了你的问题。看看这段代码。这到底是不是你想要的？
$(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>
Stack Overflow用户
发布于 2018-10-18 04:53:50
要回填已删除的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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52862495
复制相关文章
相似问题
腾讯云开发者
