1

私は次のことを試します：

1 つulはリンク用、もう 1 つはスライド用

<ul class="infoslider">
        <li><a data-orbit-link="slidegroup1" href="#">Slides1</a></li>
        <li><a data-orbit-link="slidegroup2" href="#">Slides2</a></li>
    </ul>

<ul id="infoslider">
    <li class=""        data-orbit-slide="slidegroup1">  <img src="img1.png" ></li>
    <li class="active"  data-orbit-slide="">             <img src="img2.png" ></li>
    <li class=""        data-orbit-slide="slidegroup2">  <img src="img3.png" ></li>
    <li class=""        data-orbit-slide="">             <img src="img4.png" ></li>
</ul>

「次へ」をクリックするフィールド

<a class="orbit-next" href="#">Next</a>

「orbit-next」をクリックしてスライドを進めます。

JQuery を使用して#infoslider li data-orbit-slide-attribute をチェックします。空の場合は、文字列が見つかるまで上に移動します。ul.infoslide li次に、対応するアクティブ クラスを追加します。

$j("a.orbit-next").click(function() {

    //select the active li
    var test = $j("#infoslider > li.active");

    //test, if there is a string in "data-orbit-slide"
    if (test.attr("data-orbit-slide").length > 0) {     
        var link = test.attr("data-orbit-slide");
        } else {        
        //if not, get the elements
        var term1 = document.getElementById('infoslider');
        //and traverse up until a string is found
        var link = $j("#infoslider li.active").prevUntil(term1,"li[data-orbit-slide!='']").attr("data-orbit-slide");        
        }       

        //select the coresponding a in div.infoslider
        var target = $j("a[data-orbit-link='" + link + "']").parent();  

        //remove the classes active
        $j("div.infoslider > ul > li").removeClass("active");
        //add the active class
        target.addClass("active");
});

これはほとんど問題なく動作します。しかし：

  1. ul.infoslider li は常に「1 つ後ろ」です。つまり、スライド img3.png が表示されたとき、アクティブなクラスはまだ "slidegroup1" にあります。「img4.png」が表示されるまで、「slidegroup2」はアクティブ クラスを取得しません。なんで？JQuery/Orbit-Slider/my JQuery によって実行されるイベントの順序と関係がありますか?
  2. 私が望むものを達成するためのより簡単な方法はありますか?

よろしくお願いします。

4

2 に答える 2

0

以下を試してみてください。コードは正常に動作するはずです。

target.next().addClass("active");

別の実装として、Jquery data() ユーティリティを使用して、アクティブなスライド情報を保存できます。このようにして、リストをたどるのを避けることができます。複数の DOM トラバーサルを回避できるように、少し最適化を行いました。

これがコードスニペットです。

$(function () {
    //select the active li
    var $activeSlide = $("#infoslider > li.active");
    $("a.orbit-next").click(function () {
        if (!$activeSlide.length) { return; }
        var $nextSlide = $activeSlide.next();
        if (!$nextSlide.length) { return; }

        var slideGroup;
        //test, if there is a string in "data-orbit-slide"
        if ($nextSlide.attr("data-orbit-slide").length > 0) {
            slideGroup = $nextSlide.attr("data-orbit-slide");
            $(this).data("slideGroup", slideGroup);
        } else {
            slideGroup = $(this).data("slideGroup");
        }

        //remove the classes active
        $("ul.infoslider > li").removeClass('active');
        //select the coresponding a in div.infoslider
        $("a[data-orbit-link='" + slideGroup + "']").parent().addClass("active");
        $activeSlide.removeClass("active");
        $nextSlide.addClass("active");
        $activeSlide = $nextSlide;
    });
})
于 2013-04-23T00:04:22.987 に答える
0

結果は次のとおりです。

//select the active li
var activeSlide = $j("#infoslider > li.active");
//populate with data, otherwise at the first click there is no data
slideStart = activeSlide.attr("data-orbit-slide");

$j("a.orbit-next").click(function () {

    //check if second-last-child, cause the slider is looping
    //2nd-child, 2nd-last, cause Orbit is cloning the first and the last slide
    if (activeSlide.is(":nth-last-child(2)") ) {
        var nextSlide = $j("#infoslider > li:nth-child(2)");
    } else {
        var nextSlide = activeSlide.next();
    }

    var slideGroup;
    //test, if there is a string in "data-orbit-slide"
    //not very elegant, but had no idea how to initiate the var slideGroup...
    if (nextSlide.attr("data-orbit-slide").length == 0 && slideStart.length > 0) {
        slideGroup = slideStart;
        slideStart = "";
    } else if(nextSlide.attr("data-orbit-slide").length > 0 && slideStart == ""){
        slideGroup = nextSlide.attr("data-orbit-slide");
        $(this).data("slideGroup", slideGroup);
    } else {
        slideGroup = $(this).data("slideGroup");
    }


    //remove the classes active
    $j("div.infoslider > ul > li").removeClass('active');
    //select the coresponding a in div.infoslider
    $j("a[data-orbit-link='" + slideGroup + "']").parent().addClass("active");
    activeSlide = nextSlide;
});
于 2013-04-23T17:49:21.707 に答える