0

我在由嵌套 div 组成的网页上有一个简单的旋转元素，位于 ASP.NET UserControl 内。当只有一个控件存在时工作正常。但是，控件的多个实例相互干扰。该脚本在代码隐藏中注册，没有被包含两次。这是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>
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 包装在从您的用户控件中获取唯一 ID 的父 div 中可以解决问题。

就像是 ：

<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

像往常一样好的，将问题发布到 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 的链接。

于 2013-01-30T00:03:26.510 回答
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 回答