0

div ボタンをクリックするたびに 5 つの div を 1 つずつ追加する必要があります (新しいdivものは既存のものの下に追加する必要がありますdiv)。いくつかのコードを書きましたが、新しいdivが既存の にアタッチされていdivます。

これを修正するのを手伝ってください。

div追加されたs を 1 つずつ削除する別のボタンがあります(新しいものを最初に削除します)。

これが大量のコードである場合は申し訳ありません。私は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

これを試してみてください:- 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 に答える
1

要素を削除しながらこれを試してください。

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

デモ

更新されたデモ

于 2013-10-02T11:50:01.580 に答える