jQuery 선택기로 객체 값을 가져 오는 데 도움이 필요합니다.

Question

저는 일반적으로 OOP 개념을 처음 접했고 클라이언트 용으로이 미니 애플리케이션을 만들려고합니다. 아이디어는 모듈 번호 등을 기반으로 구성 가능한 옵션이 있어야한다는 것입니다. 관련 항목을 유지하기 위해 일부 코드를 잘라 냈습니다. 가능하면 커스터마이징 할 수 있도록 노력하고 있습니다. 아래의 옵션 배열에 추가하여 여러 라이트 박스 스타일 팝업을 지원할 수 있습니다.

모든 것은이 때까지 큰 일했다 - 내 문제는 내가 직접 $() 선택에, 설정을 통해 문자열로 selector를 공급함으로써, jQuery를 함께 options.popups 배열의 각 개체를 결합하는 것을 시도하고 있다는 점이다.

이것은 오프너에 click()을 바인딩하는 데는 문제가 없지만 selector 속성은 바인딩되지 않습니다. 매번이 오류가 발생합니다. TypeError: self.options.popups[i] is undefined. 셀렉터를 직접 삽입하면 $(".helpPopup").show();, 제대로 작동합니다. 변수 바로 위에있는 click() 함수 내에서 변수를 정의하면 작동합니다. 예 : var s = ".helpPopup";

여기에 분명한 사실이 있습니까? 이것은 나를 미치게합니다. 또한, 내 코드의 디자인 패턴은 직접 이것에 근거합니다 : https://github.com/shichuan/javascript-patterns/blob/master/jquery-plugin-patterns/prototypal-inheritance.html

고마워요!

var MODULE = { 
    init: function(options, elem) { 
     // Stuff here 

     this.bindPopups(); 
    }, 

    options: { 
     title: "Module title", 
     pages: 1, 
     currentPage: 1, 
     windowOpener: ".popupVar", 
     popups: [ 
      { 
       name: "help", 
       selector: ".helpPopup", 
       opener: ".button.open", 
       closer: ".button.close", 
       type: 3 
      } 
     ] 
    }, 

    bindPopups: function() { 
     var self = this; 

     for(i = 0; i < this.options.popups.length; i++) { 
      // Open the popup 
      $(self.options.popups[i].opener).click(function(e) { 
       e.preventDefault(); 
       $(self.options.popups[i].selector).show(); 
      }); 

      // Close the popup 
      $(self.options.popups[i].closer).click(function(e) { 
       e.preventDefault(); 
       $(self.options.popups[i].selector).hide(); 
      }); 
     } 
    } 
}; 

// If browser doesn't support Object.create 
if(typeof Object.create !== "function") { 
    Object.create = function(o) { 
     function F() { 
      F.prototype = o; 
      return new F(); 
     } 
    }; 
} 

// Create plugin 
$.plugin = function(name, object) { 
    $.fn[name] = function(options) { 
     return this.each(function() { 
      if(!$.data(this, name)) { 
       $.data(this, name, Object.create(object).init(options, this)); 
      } 
     }); 
    }; 
}; 

$.plugin("module", MODULE); 



/* PAGE CODE */ 
<script> 
    $(function() { 
     $("body").module({ 
      title: "Module 1", 
      pages: 12, 
      popups: [ 
       { 
        name: "help", 
        selector: ".helpPopup", 
        opener: ".button.open", 
        closer: ".button.close", 
        type: 3 
       }, 
       { 
        name: "info", 
        selector: ".infoPopup", 
        opener: ".button.info", 
        closer: ".button.close", 
        type: 1 
       } 
      ] 
     }); 
    }); 
</script> 

Answer 1

어떤 이유로 든 i이 클릭 기능 내에서 증가하고 있습니다. 확인하려면 클릭 이벤트 기능 바로 앞에 console.log(i);을 입력하고 열기 클릭 기능 내에 하나를 입력하십시오.

나는 그것이 (내가 어떤 명백한 버그가 표시되지 않음)이 일을 왜 모르겠지만, 하나의 빠른 해킹 당신이 for 루프를 열고 직후 var j = i;을 넣어 색인 선택으로 j을 사용하는 것입니다.

편집 : 위의 해킹은 한 번의 반복에만 작동합니다. i은 for 루프가 닫힐 때까지 평가되지 않기 때문에 여기에 증가합니다 (i가 증가한 경우) (click 이벤트의 경우). 예를 들어 기능에 i을 로깅하여이를 확인할 수 있습니다.

이 i의 적절한 값을 얻으려면,이 같은 익명 함수에 클릭 이벤트 기능을 포장해야합니다 : 자세한 내용은

$(self.options.popups[i].opener).click(
    (function (i) { 
     return function(e) { 
      e.preventDefault(); 
      $(self.options.popups[i].selector).show(); 
     } 
    })(i) 
);