簡化JQuery代碼

Question

我在我的頁面有很多popovers（JSBin），每個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」。有誰知道如何實現這一點？

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>