Question

我使用jQuery脚本来展开/折叠页面上的div，并且它完美运行。我现在正在尝试复制代码，因此有两个div执行相同但我希望它们是独立的，但是当我单击一个时，都打开/关闭。只是想知道我做错了什么？

到目前为止，我有以下HTML：

    <div class="infoToggle1">
        <div class="panel-controller">
            <div class="tab-controller1">
                <span class="close">CLOSE</span>
                <span class="show">MORE INFO</span>
            </div>
        </div>
        <div class="panel-content1">
            Content goes here
        </div>
    </div>

    <div class="infoToggle2">
        <div class="panel-controller">
            <div class="tab-controller2">
                <span class="close">CLOSE</span>
                <span class="show">MORE INFO</span>
            </div>
        </div>
        <div class="panel-content2">
            Content goes here
        </div>
    </div>

以及以下jQuery代码：

(function($) {

    jQuery(document).ready(function() {

        Panel.init();


        $(document).on('click', '.tab-controller1, .tab-controller2', function() {
             Panel.togglePanel();
        });

    });

    var Panel = {

        isVisible : false,
        showMessage : null,
        hideMessage : null,
        animationDuration : 300,
        animationEasing : 'linear',

        init: function() {
            Panel.hidePanel();
        },

        hidePanel : function() {
            $('.infoToggle1, .infoToggle2').animate({
                bottom : -(Panel.getAnimationOffset())
            }, Panel.animationDuration, Panel.animationEasing, function() {
                Panel.isVisible = false;
                Panel.updateTabMessage();
            });
        },

        showPanel : function() {
            $('.infoToggle1, .infoToggle2').animate({
                bottom : 0
            }, Panel.animationDuration, Panel.animationEasing, function() {
                Panel.isVisible = true;
                Panel.updateTabMessage();
            });
        },

        togglePanel : function() {
            ((this.isVisible) ? this.hidePanel : this.showPanel)();
        },

        updateTabMessage : function() {
            if (this.isVisible) {
                $('.tab-controller1 .close, .tab-controller2 .close').show();
                $('.tab-controller1 .show, .tab-controller2 .show').hide();
            } else {
                $('.tab-controller1 .close, .tab-controller2 .close').hide();
                $('.tab-controller1 .show, .tab-controller2 .show').show();
            }
        },

        getAnimationOffset : function() {
            return $('.panel-content1, .panel-content2').height();
        }

    }

})(jQuery);

提前致谢！

Answer 1

不要使用类选择器来打开/关闭动画，而是专注于引用与单击项目相关的元素。

Answer 2

查看显示和隐藏面板的代码。在他们两个中，你有：

$('.infoToggle1, .infoToggle2')

作为你的jQuery选择器。此选择器正在选择BOTH面板并立即在两个面板上调用.animate()。它无法区分您点击的是哪一个。

解决方案可能是传递您希望每个按钮设置动画的容器。

    $(document).on('click', '.tab-controller1', function() {
         Panel.togglePanel('.infotoggle1');
    })
    .on('click', '.tab-controller2', function() {
         Panel.togglePanel('.infotoggle2');
    });

当然，调整Panel.togglePanel()以使用新参数作为jQuery选择器。

肯定有更快/更干净的方式，但这应该让你开始。

Answer 3

您需要两个Panel对象，因为每个对象都需要自己的isVisible设置和几个类名。为此，您可以将Panel对象转换为构造函数，您可以传递一个数字（1或2）。该构造函数将返回对象，但具有仅适用于第一个元素结构的特性。如果再次使用另一个数字调用该构造函数，您将获得需要操纵（并保持状态）第二个结构的对象。

您的代码可能看起来像这样（未经测试）：

(function($) {

    jQuery(document).ready(function() {
        var panel1 = new Panel(1),
            panel2 = new Panel(2);

        $(document).on('click', '.tab-controller1', function() {
             panel1.togglePanel();
        });
        $(document).on('click', '.tab-controller2', function() {
             panel2.togglePanel();
        });
    });

    // Constructor. Needs to get the number 1 or 2
    function Panel(num) {
        var that = this; // Remember the object that is created here
        Object.assign(that, {
            isVisible : false,
            showMessage : null,
            hideMessage : null,
            animationDuration : 300,
            animationEasing : 'linear',

            init: function() {
                that.hidePanel();
            },

            hidePanel : function() {
                // Use number to address the correct class, here and below.
                $('.infoToggle' + num).animate({
                    bottom : -(that.getAnimationOffset())
                }, that.animationDuration, that.animationEasing, function() {
                    that.isVisible = false;
                    that.updateTabMessage();
                });
            },

            showPanel : function() {
                $('.infoToggle' + num).animate({
                    bottom : 0
                }, that.animationDuration, that.animationEasing, function() {
                    that.isVisible = true;
                    that.updateTabMessage();
                });
            },

            togglePanel : function() {
                (that.isVisible ? that.hidePanel : that.showPanel)();
            },

            updateTabMessage : function() {
                if (that.isVisible) {
                    $('.tab-controller' + num + ' .close').show();
                    $('.tab-controller' + num + ' .show').hide();
                } else {
                    $('.tab-controller' + num + ' .close').hide();
                    $('.tab-controller' + num + ' .show').show();
                }
            },

            getAnimationOffset : function() {
                return $('.panel-content' + num).height();
            }
        });
        // call init here, which will execute when you do `new Panel`:
        that.init();
    }
})(jQuery);

使JavaScript项独立

3 个答案: