javascript - 简化 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>

我想简单地描述上面的代码，“对于所有带有 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 个或多个元素。