0

私が抱えている問題は、関数が異なる要素に対して複数回呼び出される場合です。この関数を複数の要素に対して使用できるように、すべての変数をローカライズする必要があると思います。重要な場合は、jquery 1.3 も呼び出します。

pageSlide を 1 回だけ呼び出す場合は問題ありませんが、何度も呼び出すと面倒です。エラーはありませんが、動作が不安定です。

コードが更新されました

var slideMenu=function(){
  var speed, startWidth, time, menuId, liID, menuLen, menuWidth, globalWidth, openWidth;
  return{

    speed : 0, startWidth : 0, time  : 0, menuId  : 0, liID : 0, menuLen  : 0,        menuWidth  : 0, globalWidth : 0, openWidth : 0,

    build:function(ulID,passStartWidth,passTime,s,passSlideLen,passHeight){
      speed=s;
      startWidth=passStartWidth;
      time=passTime;
      menuId=document.getElementById(ulID);
      liID=menuId.getElementsByTagName('li');
      menuLen=liID.length;
      menuWidth=menuId.offsetWidth;
      globalWidth=menuWidth/menuLen;
      openWidth=Math.floor((menuWidth-startWidth)/(menuLen-1));
      var i=0;
      for(i;i<menuLen;i++){
        s=liID[i];
        s.style.width=globalWidth+'px';
        this.timer(s)
      }
      if(passSlideLen!=null){
        menuId.timer=setInterval(function(){
          slideMenu.slide(liID[passSlideLen-1])
        },time)
      }
    },
    timer:function(s){
      s.onmouseover=function(){
        clearInterval(menuId.htimer);
        clearInterval(menuId.timer);
        menuId.timer=setInterval(function(){
          slideMenu.slide(s)
        },
        time)
      }
      s.onmouseout=function(){
        clearInterval(menuId.timer);
        clearInterval(menuId.htimer);
        menuId.htimer=setInterval(function(){
          slideMenu.slide(s,true)
        },
        time)
      }
    },
    slide:function(s,passChange){
      var changeWidth=parseInt(s.style.width);
      if((changeWidth<startWidth && !passChange) || (changeWidth>globalWidth && passChange)){
        var overallWidth=0;
        var i=0;
        for(i;i<menuLen;i++){
          if(liID[i]!=s){
            var slideObj,openWidth; var opening=0; slideObj=liID[i]; openWidth=parseInt(slideObj.style.width);
            if(openWidth<globalWidth && passChange){
              opening=Math.floor((globalWidth-openWidth)/speed);
              opening=(opening>0)?opening:1;
              slideObj.style.width=(openWidth+opening)+'px';
            }else if(openWidth>openWidth && !passChange){
              opening=Math.floor((openWidth-openWidth)/speed);
              opening=(opening>0)?opening:1;
              slideObj.style.width=(openWidth-opening)+'px'
            }
            if(passChange){
              overallWidth=overallWidth+(openWidth+opening)}else{overallWidth=overallWidth+(openWidth-opening)
            }
          }
        }
        s.style.width=(menuWidth-overallWidth)+'px';
      }else{
        clearInterval(menuId.timer);
        clearInterval(menuId.htimer)
      }
    }
  };
}();

上記のコードはエラーにはなりませんが、機能しません。this キーワードを使用すると、改善されません。

私の質問は、どの変数が「これ」であるべきかということです。うまくいくと思ったさまざまな組み合わせを試しましたが、何かが欠けています。

4

2 に答える 2

2

モジュール パターンの全体的な概念を誤解していると思います。すべてのインスタンス間でグローバルな静的変数を共有する必要がある場合は、return ステートメントの直前にキーワード「var」を使用して変数を宣言または初期化できます。

これらの変数を変更するたびに、すべてのインスタンスが変更の影響を受けると仮定します。

var slideMenu=function(){
    // Declare or initialize your private static variables here    
    var speed, startWidth, time;

    return {
        // Public part of your object
        slide:function(s,passChange){
            //To access your variable        
            speed = 20;
        ...

一方、変数をグローバル スコープから安全に保ちたい場合は、関数によって返されるオブジェクトに変数を配置する必要があります。これは、インスタンスごとに固有のプロパティを提供する信頼できる方法です。

var slideMenu=function(){
    // Declare or initialize your private static variables here    
    var speed, startWidth, time;

    return {
        // Public part of your object
        // Declare internal or public properties here
        menuId  : 0, 
        liID    : 0, 
        menuLen : 0,
        ...
        slide:function(s,passChange){
            //To access your private static variable inside functions        
            speed = 20;
            // To access your public/internal properties
            this.menuId = s; // for example ;) 
        }

結論として

内部プロパティと公開プロパティを区別するために、内部プロパティの先頭にアンダースコアを付ける人もいます (プロパティには引き続き外部からアクセスできることに注意してください)。

それが役に立てば幸いです、頑張ってください！

于 2009-06-03T04:57:55.793 に答える
1

オブジェクトにプライベートな静的変数を保持できるようにするモジュール パターンを使用しているため、この動作が発生します。問題は、これらの変数がすべてのインスタンス間で共有されることです。

  var sp=0;
  var st=0;
  var t=0;
  var m='';
  var sa='';
  var l=0;
  var w=0;
  var gw=0;
  var ot=0;

これらの変数を、スクリプトの戻り部分またはコンストラクターでパブリック インスタンスに移動する必要があります (ただし、この場合、すべての変数にゲッターを提供する必要があります)。

return{

   // Place your variables here
   sp : 0,
   st : 0,

   ...

   build:function(sm,sw,mt,s,sl,h){
      // And then use the this keyword to access the variable
      this.sp=s;
      this.st=sw;
      t=mt;
      m=document.getElementById(sm);
      sa=m.getElementsByTagName('li');
      l=sa.length;     
      w=m.offsetWidth;     
      gw=w/l;
      ...
于 2009-06-02T14:29:11.940 に答える