<分区>
标签 javascript jquery html css
我需要在每次单击 div 按钮时一个一个地添加 5 个 div(新的 div 应该添加到现有的 div 下方)。我已经编写了一些代码，但是新的 div 正在附加到现有的 div。
请帮助更正此问题。
我有另一个按钮，可以一个一个地删除添加的 div(首先删除新的)。
抱歉，如果代码太多；我是 jQuery 和脚本的新手。
Here is my code . 脚本:
$("#dragbtnmore").click(function () {
$('.toAdd').each(function () {
if ($(this).css('display') == 'none') {
$(this).css('display', 'block');
return false;
}
});
var i = 0;
$('.toAdd').each(function () {
if ($(this).css('display') != 'none') {
i++;
}
});
if (i == 5)
$('#dragbtnmore').click(function () { return false; });
});
$("#dragbtnless").click(function () {
$('.toAdd').each(function () {
if ($(this).css('display') == 'block') {
$(this).css('display', 'none');
return false;
}
});
var i = 0;
$('.toAdd').each(function () {
if ($(this).css('display') != 'block') {
i++;
}
});
if (i == 5)
$('#dragbtnless').click(function () { return false; });
$('#dragbtnless').click(function () { return true; });
});
function showmore() {
document.getElementById('containershowmore').style.display = "block";
}
HTML:
<div class="clearFix"></div>
<div id="containershowmore" >
<div id="dragbtnmore" style="cursor: default;">Show more buttons</div>
<div id="dragbtnless" style="cursor: default;">Show Fewer buttons</div>
</div>
<div class="toAdd" style="display:none;" >
<div id="dragdashboardmain" style="cursor: pointer;">dash</div></div>
<div class="toAdd" style="display:none;" >
<div id="dragrcalendar" style="cursor: pointer;">Calendar</div></div>
<div class="toAdd" style="display:none;">
<div id="dragresourcelist" style="cursor: pointer;">Rlist</div></div>
<div class="toAdd" style="display:none;">
<div id="dragdailynotes" style="cursor: pointer;">D Notes</div></div>
<div class="toAdd" style="display:none;">
<div id="dragweeklynotes" style="cursor: pointer;">W Notes</div></div>
风格:
#containershowmore
{
position: relative;margin-left: 160px;background-color: #b1dafb;z-index: 1;
width: 125px;
float:right;
padding-left: 5px;
}
#dragbtnmore{
margin-bottom:10px;
border:1px solid black;
}
.toAdd
{
height:20px;
width:70px;
position: relative;
margin-bottom: 14px;
}
最佳答案
JS:-
//i need the output after click showmore buttons:
//w notes
//d notes
//R list
//calendar
// dash
// while removing need w notes to get removed first,
// say like lastin firstout
$("#dragbtnmore").click(function () {
$('.toAdd').each(function () {
if ($(this).css('display') == 'none') {
$(this).css('display', 'block');
return false;
}
});
var i = 0;
$('.toAdd').each(function () {
if ($(this).css('display') != 'none') {
i++;
}
});
if (i == 5) $('#dragbtnmore').click(function () {
return false;
});
});
$("#dragbtnless").click(function () {
$($('.toAdd').get().reverse()).each(function () {
if ($(this).css('display') == 'block') {
$(this).css('display', 'none');
return false;
}
});
var i = 0;
$('.toAdd').each(function () {
if ($(this).css('display') != 'block') {
i++;
}
});
if (i == 5) $('#dragbtnless').click(function () {
return false;
});
$('#dragbtnless').click(function () {
return true;
});
});
function showmore() {
document.getElementById('containershowmore').style.display = "block";
}
关于javascript - 后进先出分区，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19136020/