简化 JQuery 代码答案

【问题标题】：Simplify a JQuery code简化 JQuery 代码
【发布时间】：2016-11-28 03:33:03
【问题描述】：

我的页面中有许多弹出框 (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 的 html”。有谁知道如何实现这一点？

【问题讨论】：

使用for。 for (var i = 0; i < 3; i++) { $('[data-toggle="popover' + i + '"]').popover({ html: true, content: function() { return $("#popover" + i + "-html").html(); } }); }
我明白了...但是如果我不知道弹出框的数量怎么办（例如，3 这里）。我只想说“对于所有弹出框”，或者“对于所有 id 以字符串 popover 开头的弹出框”...
$('[data-toggle^="popover"]').length
@Tushar - 我怀疑content 函数将在稍后执行，此时i 将是 3...

标签： javascript jquery twitter-bootstrap-tooltip

【解决方案1】：

一个选项是：

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

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

【讨论】：

【解决方案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>

【讨论】：