0

我需要在每次单击 div 按钮时一个一个地添加 5 个 div（新的div应该添加到现有的下方div）。我已经编写了一些代码，但是新div的 s 正在附加到现有的div.

请帮助纠正这个问题。

我有另一个按钮，它div一个一个地删除添加的 s （首先要删除新的）。

对不起，如果这是很多代码；我是 jQuery 和脚本的新手。

这是我的代码。脚本：

$("#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;

}
4

2 回答 2

1

删除元素时尝试此操作。

 $('.toAdd :visible :last').hide();
        return false;

演示

更新的演示

于 2013-10-02T11:50:01.580 回答
1

试试这个：- http://jsfiddle.net/YvE5F/5/

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";
}
于 2013-10-02T11:54:18.293 回答