简化 JQuery 代码

Question

我的页面中有很多弹出窗口 (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>

我想通过说 "for all data-toggle with an ID, we return the html whose id is ID + -html" 来简化上面的代码。有谁知道如何实现这一点？

Answer 1

<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>

Answer 2

一个选项是：

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

以上脚本使用 data-toggle 属性的值来选择目标元素。它适用于 1 个或多个元素。

简化 JQuery 代码

Simplify a JQuery code

javascript

jquery

twitter-bootstrap-tooltip