Динамические селекторы для навигации по внешнему слайдеру jQuery? - PullRequest
Новая
       20

Динамические селекторы для навигации по внешнему слайдеру jQuery?

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

Очень простой вопрос:

Я построил слайдер с (динамическое количество слайдов) с боковой панелью для расширенной навигации (#slidercontrols). Каждый дочерний элемент этой боковой панели навигации должен ссылаться на свой соответствующий слайд.

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

Как вы могли бы создать простой цикл, который направляет дочерний элемент #slidernavigation X к слайду X? Вам понадобится какой-то динамический селектор, с которым я не знаком ...

Скрипка: http://jsfiddle.net/qbahamutp/TsJCP/

Ответы [ 2 ]

1 голос
/ 29 июля 2011

Я хотел бы сделать это:

http://jsfiddle.net/9Quk7/5/

добавить атрибут rel к элементу управления ползунка с номером слайда с помощью $.each() или использовать другую логику для этого (например,генерировать индексы в HTML, например, получить их из базы данных).Вы можете использовать его как селектор в jQuery и CSS, а также.например, .article[rel="1"]{ color: red !important; }

Сгенерированная разметка будет выглядеть как 

<div class="article gotoslide-1 currentslide" rel="1">
                <h4>Past NedTrain bij jou?</h4>
                <p>Bekijk met welke functies en .</p>
</div>

и использовать $(this).attr('rel') в onclick для получения индекса. 

$(function(){
    $('#contentslider ul').anythingSlider({
        width            : 320,
        height            : 215,
        startStopped    : true,
        forwardText        :"&nbsp;",
        backText        :"&nbsp;",
        delay            : 6000,
        easing            : 'easeInOutExpo',
//                    buildArrows        : false,
        hasgTags        : false,
//                    appendControlsTo: "#slidercontrols",
        buildNavigation    : false
    });

    $("#slidercontrols .article").each(function(i){
        $(this).attr('rel',i+1);
    });
    // Slide navigation. 
    $("#slidercontrols .article").click(function(){
        $('#contentslider ul').anythingSlider($(this).attr('rel'), function(slider){ /* alert('Now on page ' + slider.currentPage); */ });
        $(".currentslide").removeClass("currentslide");
        $(this).addClass("currentslide");
        return false;
    });
});

Возможно, вы захотите использовать$("#slidercontrols .article").live('click',...); если вы планируете динамически добавлять слайды

1 голос
/ 29 июля 2011

Ну, во-первых, я бы предложил использовать только один селектор.Тогда как распознать индекс?Есть много способов, но в этом случае одним из способов может быть сохранение данных для элемента div с помощью jQuery http://api.jquery.com/jQuery.data/

Затем, когда вы нажимаете любой div, вы просто берете индекс из сохраненных данных и используете его.1004 *

Если вы знаете, что div всегда в индексированном порядке, вы можете просто использовать .index () aswell.Пример с .index () http://jsfiddle.net/TsJCP/1/

...