JavaScript 객체 함수를 HTML 요소에 연결합니다.

Question

예를 들어, 페이지의 <UL> 요소에서 몇 가지 비헤이비어를 정의하고 싶습니다. 당신이 다음 새 <li>이 끝에 추가됩니다,>은 <li을 두 번 클릭하면 이러한

• ... 당신은 다음의 <ul> 내부의 <li>에 자사의 색상 변경 ...
• 을 클릭합니다.

가 지금은 작은 jQuery를이 일을 수행하기 위해 나는 각각의 기능을 쓸 수있는 사용하는 것을 알고있다.

그리고 많은 다른 같은 행동 ... ...

• $("ul li").on ('click', function() { ... .css() .. });
는
• $("ul li").on ('dblclick', function() { ... .append("<li>New Born Li</li>") ... });

하지만 제가 정말하고 싶은 구조와 같은 단일 객체 (클래스)의 모든 기능을 캡슐화하는 것입니다. 그런 다음 해당 요소의 해당 기능을 사용할 수 있도록 모든 요소에 해당 기능을 연결합니다. 이런 식으로 뭔가 - 나는 모든 행동이 <ul>에 적용받을 <ul>에이 함수를 호출하면

$("ul").enableMySpecialULFeatures ({ 
    color: 'red', 
    textToAppend: 'New Born Li' , 
    ... 
}); 

.

내 질문입니다 -이 enableMySpecialULFeatures 유형의 개체 기능을 어떻게 만듭니 까? 궁금 누군가가 나에게 나를 시작하는 보일러 ...

Answer 1

생성 JS는 다음과 같이 플러그인을 제공 할 수있는 경우 : -

$.fn.enableMySpecialULFeatures = function(options) { 
var settings = $.extend({ 
    color: "#556b2f", 
    textToAppend: 'New Born Li' 
    }, options); 

return this.each(function() { 
    $(this).find('li').click(function(){ 
    $(this).css('color',settings.color); 
    }); 
    $(this).find('li').dblclick(function(e){ 
     e.preventDefault(); 
     $(this).append('<li>'+settings.textToAppend+'</li>'); 
    }); 
}); 
}; 

및 사용 : -

$(function(){ 
    $('ul').enableMySpecialULFeatures({ 
    color:'green', 
    textToAppend:"hello" 
    }); 
}); 

Demo

Answer 2

을 그리고 return 문에서 $(this)에 대한 단일 참조에서 여러 이벤트 처리기를 사용하여 @ mohit-arora의 예를 개선하십시오.

$.fn.enableMySpecialULFeatures = function(options) { 
    var settings = $.extend({ 
    color: "#556b2f", 
    textToAppend: 'New Born Li' 
    }, options); 

    return this.each(function() { 
    $(this).find('li').on({ 
     click: function(){ 
     $(this).css('color',settings.color); 
     }, 
     dblclick: function(e) { 
     e.preventDefault(); 
     $(this).append('<li>'+settings.textToAppend+'</li>'); 
     } 
    }); 
}); 
};