html要素を表示/非表示にするコンストラクタ関数

html要素を表示/非表示にするオブジェクトのコンストラクタ関数を記述する必要がありますが、同じではなくスムーズに継承するオブジェクトが必要です。ここまでは私がこれまで書くことができましたが、何かがうまくいきません。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>

出典

2016-11-05 user1856779

滑らかなトグルのクリックイベントが間違っているようです。

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

出典

2016-11-05 07:46:46 Karpak

を次のように

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

また、あなたのプロトタイプ定義をする必要がありますする必要があります

継承についての誤解がここにあります

プロトタイプが上で設定する必要がありますコンストラクタ関数です。オブジェクトは含みません。 smoothToggler.Toggler.prototype = simpleToggler.Toggler.prototype;はおそらくあなたが期待していることをするでしょう。
コンストラクタで定義されたメソッドは、プロトタイプの一部ではなく、継承されません。コンストラクタ関数内にthis.toggleを定義する代わりに、コンストラクタの外側にsimpleToggler.Toggler.prototype.toggleと定義します。
new smoothToggler.Toggler('smooth');を呼び出すと、 'smooth'引数は無視されます。 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); 
    }; 
})();

あなたはまた、クリックイベントの1つを変更する必要があります： "sToggleDiv.sToggle（）" を "sToggleDiv.toggle（）"。

出典

2016-11-05 07:52:11 djd0

html要素を表示/非表示にするコンストラクタ関数

答えて

関連する問題