JQuery 코드 단순화

Question

내 페이지 (JSBin)에 많은 popovers가 있습니다. 각 data-toggle은 HTML div에 연결되어 있습니다. 그것은 이제 다음 스크립트에 의해 실현된다 :

<script> 
    $('[data-toggle="popover0"]').popover({ 
    html: true, 
    content: function() { 
    return $("#popover0-html").html() 
    }}); 

    $('[data-toggle="popover1"]').popover({ 
    html: true, 
    content: function() { 
    return $("#popover1-html").html() 
    }});  

    $('[data-toggle="popover2"]').popover({ 
    html: true, 
    content: function() { 
    return $("#popover2-html").html() 
    }}); 
</script> 

내 말에 의해 간단하게 위의 코드 싶습니다 "ID가 모든 데이터 전환을 위해, 우리는 id가 ID + -html되는 HTML을 반환합니다." 아무도 이것을 깨닫는 방법을 알고 있습니까?

Answer 1

하나의 옵션은 :

$('[data-toggle]').popover({ 
    html: true, 
    content: function() { 
     var id = "#" + this.getAttribute('data-toggle') + "-html"; 
     return $(id).html(); 
    } 
}); 

상기 스크립트는 타겟 요소를 선택하는 data-toggle 속성의 값을 사용한다. 1 또는 여러 요소에 대해 작동합니다.

Answer 2

<script> 
    for (var i=0;i<3;i++) { 
     var selector = '[data-toggle="popover'+ i +'"]'; 
     var popover = '#popover' + i +'-html'; 
     $(selector).popover({ 
     html: true, 
     content: function() { 
     return $(popover).html() 
     }}); 
    } 
</script>