DRY JS - 如何将相同的 JavaScript 函数合并为一个？

Question

我有一个 JS 函数可以根据按钮 ID 加载相同的调整大小函数。

我正在尝试简化代码以使其保持干爽和干净。由于我可以在单个页面上放置 100 多个这样的按钮，因此我需要以某种方式使代码更加动态。

var a = $('.a').popover();
a.on("show.bs.popover", function(e) {
    a.data()["bs.popover"].$tip.css("max-width", "630px");
});

var b = $('.b').popover();
b.on("show.bs.popover", function(e) {
    b.data()["bs.popover"].$tip.css("max-width", "630px");
});

var c = $('.c').popover();
c.on("show.bs.popover", function(e) {
    c.data()["bs.popover"].$tip.css("max-width", "630px");
});

var d = $('.d').popover();
d.on("show.bs.popover", function(e) {
    d.data()["bs.popover"].$tip.css("max-width", "630px");
});

我试过了，但它只对第一个按钮有效：

var a = $('.a, .b, .c, .d,').popover();
a.on("show.bs.popover", function (e) {
    a.data()["bs.popover"].$tip.css("max-width", "630px");
});

有什么想法吗？

我只需要让 bootstrap Popover window 600px.

Answer 1

您需要在闭包内使用它，以便引用活动元素

$('.a, .b, .c, .d').popover().on("show.bs.popover", function (e) {
    $(this).data()["bs.popover"].$tip.css("max-width", "630px");
});

你如何使用数据而不是把密钥放在里面也很奇怪。通常你会使用 data("key") 而不是括号符号

    $(this).data("bs.popover").$tip.css("max-width", "630px");

Answer 2

尝试

var a = $('.a, .b, .c, .d,');
a.each(function(){
  var $this = jQuery(this);
  $this.popover();
  $this.on("show.bs.popover", function (e) {
    $this.data("bs.popover").$tip.css("max-width", "630px");
  });
});

DRY JS - 如何将相同的 JavaScript 函数合并为一个？

DRY JS - How to Combine Identical JavaScript Functions into One?

javascript

jquery

twitter-bootstrap

popover