Question

我需要编写一个构造函数，其对象隐藏/显示一个html元素，然后我需要一个继承对象，而不是相同但顺利。这是我到目前为止所写的内容，但有些东西不起作用，有什么帮助吗？

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <div>
    <h3 style = "cursor: pointer;" onclick = "toggleDiv.toggle()">Click to toggle</h3>
    <p id = "toggle">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <h3 style = "cursor: pointer;" onclick = "sToggleDiv.sToggle()">Click to toggle smoothly</h3>
    <p id = "smooth">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <script>

    var simpleToggler = {
        Toggler : function(id){
            this.elem = document.getElementById(id);
            this.toggle = function(){
                if(this.elem.style.display == 'none'){
                    this.elem.style.display = 'block';
                } else {
                    this.elem.style.display = 'none'; 
                }
            }
        }

    };

    var smoothToggler = {
        Toggler : function(){
            setTimeout(this.toggle, 500);
        }

    };

    smoothToggler.prototype = simpleToggler;

        var toggleDiv = new simpleToggler.Toggler('toggle');
        toggleDiv.toggle();
        var sToggleDiv = new smoothToggler.Toggler('smooth');
        sToggleDiv.toggle();


    </script>
</body>
</html>

Answer 1

你顺利切换的点击事件似乎是错误的。

应该是

<h3 style="cursor: pointer;" onclick="sToggleDiv.toggle()">Click to toggle smoothly</h3>

您的原型定义也应如下

smoothToggler.Toggler.prototype = new simpleToggler.Toggler('smooth');

Answer 2

这里有关于继承的误解：

原型需要在构造函数上设置，而不是包含对象。 smoothToggler.Toggler.prototype = simpleToggler.Toggler.prototype;可能会做你期望的事。
构造函数中定义的任何方法都不是原型的一部分，不会被继承。而不是在构造函数中定义this.toggle，而是在构造函数外部将其定义为simpleToggler.Toggler.prototype.toggle。
当您致电new smoothToggler.Toggler('smooth');时，＆＃39;顺利＆＃39;参数被忽略了。 sToggleDiv将没有elem属性。您需要在smoothToggler构造函数中处理它。

我也不认为你真的想在构造函数中做setTimeout。在toggle方法中这样做会更有意义。尝试这样的事情：

var simpleToggler = {}, smoothToggler = {};
(function () {
    function toggle(elem){
        if(elem.style.display == 'none'){
            elem.style.display = 'block';
        } else {
            elem.style.display = 'none'; 
        }
    }
    function init(o, id) { o.elem = document.getElementById(id); }
    simpleToggler.Toggler = function (id) { init(this, id); };
    simpleToggler.Toggler.prototype.toggle = function () {
        toggle(this.elem);
    };
    smoothToggler.Toggler = function (id) { init(this, id); };
    smoothToggler.Toggler.prototype.toggle = function () {
        var that = this;
        setTimeout(function () {toggle(that.elem);}, 500);
    };
})();

您还需要更改其中一个点击事件：＆＃34; sToggleDiv.sToggle（）＆＃34; to＆＃34; sToggleDiv.toggle（）＆＃34;。

构造函数，其对象隐藏/显示html元素

2 个答案: