Question

我正在构建一个自定义滑块，最终用户有可能优先考虑哪个幻灯片应该首先出现，我认为最好的方法是在每个主要DOM元素上建立数据优先级，首先设置为Opacity：0，在这种情况下DOM元素的最大值为3.

然而，正如您在代码中看到的那样，它只是从顶部和底部抓取DOM元素，并忽略数据值。

如何以正确的顺序将这些放入数组？

    var hideSlide = 0;
    var showSlide = 1;
    var amountOfSlides = 2;
    var slideArray = [];
    var dataPriority = 1;

    $('.hero-detail-container').each(function(e) {
        if ( $(this).data('active') == '1' && $(this).data('priority') == '1' ) {
        slideArray.push($(this));
    }
    else if ( $(this).data('active') == '1' && $(this).data('priority') == '2' ) {
        slideArray.push($(this));
    }
    if ( $(this).data('active') == '1' && $(this).data('priority') == '3' ) {
        slideArray.push($(this));
    }

        // THE ISSUE IS HERE
        // The code will push to slideArray in the order
        // it sees the DOM elements from the top, even if
        // the priority says the first element is number 2 fx.

    });

    slideArray[0].css({
        "opacity": "1"
    });

    setInterval(function() {

        console.log(slideArray);

        slideArray[hideSlide].css({
            "opacity": "0"
        });
        slideArray[showSlide].css({
            "opacity": "1"
        });

        if ( showSlide >= amountOfSlides ) {
            hideSlide = amountOfSlides;
            showSlide = 0;
        }
        else if ( hideSlide == 2 && showSlide == 0 ) {
            hideSlide = 0;
            showSlide = 1;
        }
        else {
            hideSlide++;
            showSlide++;
        }

    }, slideTimer());

Answer 1

要做到这一点的几种方法。

3：在添加元素后对数组进行排序。

slideArray.sort(function(a,b){ return a.data('priority') - b.data('priority') });

基于data-attribute以特定顺序将DOM对象添加到数组

1 个答案: