Скрытия дивы между двумя идентификаторами

У меня есть следующий HTML структура:Скрытия дивы между двумя идентификаторами

<div id='articles'> 
    <div id='unread'>Unread articles</div> 
    <div></div> 
    <div></div> 
    <div id='read'>Read articles</div> 
    <div></div> 
    <div></div> 
</div>

я создал простые кнопки для переключения/выключать статей на основе того, хочет ли пользователь видеть чтение/непрочитанными.

<div onclick='$("#read").hide();$("#unread").show();'>Show read</div> 
<div onclick='$("#unread").hide();$("#read").show();'>Show unread</div>

Что такое недостающая деталь в событии onclick, которая может выбирать divs между двумя идентификаторами флагов?

Я не могу поместить закрывающий тег после последней статьи из определенной категории, я могу использовать его только как флаг.

источник

2014-01-24 Ando

В чем проблема в этом ?? – Bhadra

@ Travesty3 причина в том, что я генерирую список с циклом foreach, в котором у меня есть механизм сортировки, который может создавать только флаги между разными категориями. Я не хочу иметь две петли foreach, чтобы я мог выполнять принцип DRY. – Ando

$("#unread").nextUntil("#read");

This возвращает список всех элементов между ними.

источник

2014-01-24 05:56:40

И, конечно, '.prevUntil()' для перехода назад. – Travesty3

и для выбора только divs, вы можете указать: '$ (" # непрочитанный "). NextUntil (" # read "," div ");' – Roman

Выбор всех элементов между двумя другими элементами - это нечто странное.

Я хотел бы предложить фиксируя структуру HTML, чтобы выглядеть примерно так:

<div id="articles"> 
    <h1>Unread articles</h1> 
    <div id="unread"> 
     <div></div> 
     <div></div> 
    </div> 
    <h1>Read articles</h1> 
    <div id="read"> 
     <div></div> 
     <div></div> 
    </div> 
</div>

Тогда ваши кнопки будут работать как есть. Однако не рекомендуется добавлять эти события в очередь. Было бы лучше связать событие onclick в отдельном блоке кода JS. Это упростит работу.

источник

2014-01-24 06:05:09 Travesty3

Я знаю об этом, и именно так я обычно подхожу к но в этом случае из-за следующего механизма сортировки php внутри цикла foreach я могу просто добавить флаги. '

"; }?> ' – Ando

Одним из способов достижения этой цели может быть, чтобы добавить класс к детям дивы, которые вы хотите показать шкурку с флагами, как:

<div id='articles'> 
    <div id='unread'>Unread articles</div> 
    <div class="unreadChild"></div> 
    <div class="unreadChild"></div> 
    <div id='read'>Read articles</div> 
    <div class="readChild"></div> 
    <div class="readChild"></div> 
</div>

, а затем:

<div onclick='$("#read").hide();$("#unread").show();$(".unreadChild").show();$(".readChild").hide();'>Show read</div> 
<div onclick='$("#unread").hide();$("#read").show();$(".unreadChild").hide();$(".readChild").show();'>Show unread</div>

источник

2014-01-24 06:11:23 umair

Ваш HTML код:

<div id='articles'> 
<div id='read'>Read articles</div> 
    <div>Read1</div> 
    <div>Read2</div> 
<div id='unread'>Unread articles </div> 
    <div>Unread1</div> 
    <div>Unread2</div> 
</div>

Код JS:

$("#showread").click(function() { 
    $("#unread").hide(); 
    $("#unread").nextAll().hide(); 
    $("#read").show(); 
    $("#read").nextUntil("#unread").show(); 
}); 

$("#showunread").click(function() { 
$("#read").hide(); 
$("#unread").prevUntil("#read").hide(); 
$("#unread").show(); 
$("#unread").nextAll().show(); 
});

источник

2014-01-24 06:51:29

Скрытия дивы между двумя идентификаторами

ответ

Смежные вопросы