0

ASP.NET UserControl 内に、ネストされた div で構成される Web ページに単純な回転要素があります。コントロールが 1 つしか存在しない場合は正常に動作します。ただし、コントロールの複数のインスタンスが互いに干渉しています。スクリプトはコード ビハインドに登録され、2 回含まれることはありません。jQueryコードは次のとおりです。

    $(document).ready(function () {
    var timer = null;

    $("div.divRotator").find("div:first-child").show();

    //Wait 5 seconds then call rotate();
    timer = setTimeout(rotate, 4000);

    function rotate() {
        var nextDiv = $("div.divRotator").find("div:visible").next("div");
        if (nextDiv.html() == null) {  //PROBLEM HERE!!!
            nextDiv = $("div.divRotator").find("div:first-child");
            //console.log("rotating...");
        }
        $("div.divRotator").find("div:visible").fadeOut(500, function () { nextDiv.show(); });

        timer = setTimeout(rotate, 4000);
    }
});

すべてのコントロールが同じ数の要素を持っている場合、このコードは正常に機能します...しかし、そうでない場合、物事は不安定になります。ページに UserControl のインスタンスが複数あるため、nextDiv は実際には複数の要素で構成されているため、ローテーションを再開する必要があるかどうかを確認するチェックは機能しません。

ここで最善の戦略は何ですか？コード ビハインドで div クラス/ID を変更し、各コントロールに個別の JavaScript を与えますか? それは退屈なようで、不要なはずです。どうにかして nextDiv の動作を変更したほうがよいように思えますが、私の jQuery の知識はここで失敗しています...確かにこれに対する簡単な解決策はありますか?

参考までに、レンダリングされたコンテンツは次のようになります。

<div class="divRotator">
    <div style="display:none"> Some content </div>
    <div style="display:none"> Some more content </div>
    <div style="display:none"> you guessed it </div>
</div>

<div class="divRotator">
    <div style="display:none"> Uh oh, now we got trouble <div>
</div>
4

4 に答える 4

1

まず、divタグを閉じていません。http://jsfiddle.net/ryansmith94/5NwbH/

<div class="divRotator">
    <div style="display:none"> Some content </div>
    <div style="display:none"> Some more content </div>
    <div style="display:none"> you guessed it </div>
</div>

<div class="divRotator">
    <div style="display:none"> Uh oh, now we got trouble </div>
</div>
于 2013-01-29T23:42:38.877 に答える
0

おそらく、「divRotator」divを親divでラップし、ユーザーコントロールから一意のIDを取得することでうまくいく可能性があります。

何かのようなもの ：

<div id="divParent" runat="server">
 <div class="divRotator">
    <div style="display:none"> Some content <div>
    <div style="display:none"> Some more content <div>
    <div style="display:none"> you guessed it <div>
 </div>

  <div class="divRotator">
    <div style="display:none"> Uh oh, now we got trouble <div>
  </div>
</div>

/// Javascript

    $(document).ready(function () {
    var timer = null;
    var divParent = $('#<%= divParent.ClientID  %>');
    var divrotator = divParent.find("div.divRotator");



    divrotator.find("div:first-child").show();

    //Wait 5 seconds then call rotate();
    timer = setTimeout(rotate, 4000);

    function rotate() {
        var nextDiv = divrotator.find("div:visible").next("div");
        if (nextDiv.html() == null) {  //PROBLEM HERE!!!
            nextDiv =divrotator.find("div:first-child");
            //console.log("rotating...");
        }
        divrotator.find("div:visible").fadeOut(500, function () { nextDiv.show(); });

        timer = setTimeout(rotate, 4000);
    }
});

注：テストされていません。あなたはいくつかの調整をしなければならないかもしれません

于 2013-01-29T23:47:00.587 に答える
0

userControls を使用している場合は、モジュール パターンなどを使用してコードを外部からの干渉から保護する必要があります。

e.g.
        var specificUserControlName = {};

        (function () {
            specificUserControlName.AnimationJs = function () {

                var _rotate= function () {
             var nextDiv = $("div.divRotator").find("div:visible").next("div");
              if (nextDiv.html() == null) {  //PROBLEM HERE!!!
                  nextDiv = $("div.divRotator").find("div:first-child");
                  //console.log("rotating...");
               }
               $("div.divRotator").find("div:visible").fadeOut(500, function () { nextDiv.show(); });

              timer = setTimeout(rotate, 4000);
                };


                return { // publicly accessible API

                    rotate: function () {
                        _rotate();
                    }

                };

            };

        })();

        var uniqueUserControlShortName= new specificUserControlName.AnimationJs();

次に、関数を uniqueUserControlShortName.rotate() で呼び出して、正しいバージョンを修飾できます

于 2013-02-07T20:21:02.407 に答える
0

いつものように、質問をStackOverflowに投稿し（数時間の欲求不満の後）、答えが返ってきました。$(selector).each() 関数を忘れていました。

個々の divRotator ごとに nextDiv を更新するように、rotate() を変更しました。

    function rotate() {
        $('div.divRotator').each(function (index, value) {    //IMPORTANT BIT
            var nextDiv = $(this).find('div:visible').next('div');
            if (nextDiv.html() == null) {
                nextDiv = $(this).find('div:first-child');
            }

            $(this).find('div:visible').fadeOut(500, function () { nextDiv.show(); });
        });

        timer = setTimeout(rotate, 4000);
    }

これで、操作および更新する個々の「nextDiv」要素ができました。

提案とjsfiddleへのリンクをありがとう。

于 2013-01-30T00:03:26.510 に答える