перебрать массив объектов DOM и найти сначала, что соответствует - PullRequest
0 голосов
/ 06 июля 2011

В верхней части моей формы есть панель навигации, которая переходит к следующему и предыдущему элементу (странице / разделу), но только если этот элемент виден. Дивы скрыты, если не активированы с флажком. поэтому следующая кнопка на панели навигации должна работать, всегда выводя вас на следующий доступный div.

Следующий код работает для первой кнопки, но эти навигационные панели отображаются в верхней части каждого раздела, поэтому в следующем разделе есть следующая кнопка, выполняющая ту же функцию (которая не работает), я изо всех сил пытаюсь объяснить сам вот так пожалуйста, кричите, если я не имею смысла. Вот мой код.

function showNext(){

    var pages = [document.getElementById("page2"),document.getElementById("page3")];
    var next = ["page2marker","page3marker"];

    for (var i=0; i<pages.length; i++){
        if(pages[i].style.display == "block"){
            window.location.hash = next[i];
        }
    }
}

Могу ли я изменить эту функцию, чтобы она работала для всех кнопок. Т.е. всегда переходить к следующему доступному div, который виден? Я думаю, что я, вероятно, пропустил трюк и целую кучу информации, но посмотрите, что вы думаете, какие-нибудь идеи?

Большое спасибо

1 Ответ

0 голосов
/ 06 июля 2011

Вы можете добиться этого, используя jQuery с функцией jQuery.next - http://api.jquery.com/next/.

Для такого набора HTML, как этот:

<nav><a class="showNext">Show Next</a></nav>
<div class="content" style="display:none">I'm hidden</div>
<div class="content">I'm Visible</div>

Вы можете использовать что-то вроде:

$('.showNext').bind('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
    window.location.hash = $(this).next('.content:visible').attr('id') + 'marker';
});
...