Question

我在ASP.NET UserControl中的嵌套div组成的网页上有一个简单的旋转元素。只有一个控件存在时工作正常。但是，控件的多个实例互相干扰。脚本在代码隐藏中注册，不包括两次。这是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);
    }
});

如果所有控件具有相同数量的元素，则此代码将正常工作......但是当它们不具有相同数量的元素时，事情会变得很糟糕。检查是否应该重新启动旋转不起作用，因为nextDiv实际上由多个元素组成，因为页面上有多个UserControl实例。

这里最好的策略是什么？修改代码隐藏中的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>

Answer 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>

Answer 2

或许将你的“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);
    }
});

注意：未经测试。你可能需要做一些调整

Answer 3

好像往常一样，将问题发布到StackOverflow（经过几个小时的挫折之后）然后答案来找我。我忘记了$（selector）.each（）函数。

修改rotate（）以更新每个divRotator的nextDiv：

    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。

Answer 4

如果您正在使用userControl，则应该保护代码免受外部干扰使用类似模块模式的东西

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（）调用函数来限定正确的版本

如何允许多个UserControl使用相同的jQuery

4 个答案: