последний в firstout div

Question

последний в firstout div

0

У меня есть требование добавить 5 разделов один за другим при каждом нажатии кнопки div (новый div должен быть добавлен ниже существующего div). Я написал код, но новый div привязан к существующему div.

Пожалуйста, помогите исправить это.

У меня есть еще одна кнопка, которая удаляет добавленный div один за другим (новые сначала удаляются).

Извините, если это много кода; Я новичок в 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;

}

gs11111 02 окт. 2013, в 14:04

Источник

0

вот код jsfiddle.net/YvE5F/3
gs11111 02 окт. 2013, в 11:39
0

Код должен идти в вопросе . Это не нормально, если ваш вопрос зависит от сторонних ссылок, чтобы быть ответственным.
meagar♦ 02 окт. 2013, в 11:44
2

@meager Я действительно не понимаю, в чем проблема. Я попытался создать более простой способ понять мой код. и я не единственный, кто использует jsfiddle здесь в stackoverflow. Ваша причина очень глупа
gs11111 02 окт. 2013, в 11:44
0

Я согласен с @meagar. Вы должны включить код в ответ, потому что (1) он избегает устаревания ссылок (SO здесь не для того, чтобы удовлетворять только потребности OP, но в первую очередь для нужд сообщества); (2) это повышает ваши шансы получить ответ (я обычно даже не пытаюсь ответить на вопрос, где мне нужно просматривать ссылки - особенно на сайтах, где они требуют, чтобы я установил флэш-плагины или снизил защиту браузера, чтобы увидеть код).
Lorenzo Donati 12 окт. 2013, в 16:46
0

Переполнение стека требует, чтобы ваш код был включен в вопрос. У нас есть причина для голосования по конкретным вопросам, которые не соответствуют этому правилу.
meagar♦ 12 окт. 2013, в 21:15
0

Я полностью понимаю вашу точку зрения. Я скопировал и вставил код скрипки, теперь он соответствует правилу согласно вашему комментарию.
gs11111 12 окт. 2013, в 22:04

Показать ещё 4 комментария

Теги:

javascript

jquery

html

css

2 ответа

Ещё вопросы

Код должен идти в вопросе . Это не нормально, если ваш вопрос зависит от сторонних ссылок, чтобы быть ответственным.
@meager Я действительно не понимаю, в чем проблема. Я попытался создать более простой способ понять мой код. и я не единственный, кто использует jsfiddle здесь в stackoverflow. Ваша причина очень глупа
Я согласен с @meagar. Вы должны включить код в ответ, потому что (1) он избегает устаревания ссылок (SO здесь не для того, чтобы удовлетворять только потребности OP, но в первую очередь для нужд сообщества); (2) это повышает ваши шансы получить ответ (я обычно даже не пытаюсь ответить на вопрос, где мне нужно просматривать ссылки - особенно на сайтах, где они требуют, чтобы я установил флэш-плагины или снизил защиту браузера, чтобы увидеть код).
Переполнение стека требует, чтобы ваш код был включен в вопрос. У нас есть причина для голосования по конкретным вопросам, которые не соответствуют этому правилу.
Я полностью понимаю вашу точку зрения. Я скопировал и вставил код скрипки, теперь он соответствует правилу согласно вашему комментарию.

sudhAnsu63 · Answer 1 · 2013-10-02T09-39-00.000Z

1

Попробуйте это, удалив элемент.

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

DEMO

Обновленная демоверсия

sudhAnsu63 02 окт. 2013, в 09:39

2

Это один раз запустить, не работает второй раз
Dhaval Marthak 02 окт. 2013, в 11:51
0

попробуйте обновленный jsfiddle.net/sudhAnsu63/mNLN8
sudhAnsu63 02 окт. 2013, в 12:04
0

Спасибо, НО даже при добавлении новых кнопок нужно, чтобы новые добавлялись поверх старых.
gs11111 02 окт. 2013, в 12:11
0

Вы можете использовать [append] или prepend любого селектора, чтобы добавить любой элемент в определенном месте. [append] [ api.jquery.com/append/]
sudhAnsu63 02 окт. 2013, в 12:17

Показать ещё 2 комментария

Aditya Singh · Answer 2 · 2013-10-02T09-28-00.000Z

Попробуйте это: - 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";
}

Спасибо, НО даже при добавлении мне нужны первые кнопки для добавления поверх старых.