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

Question

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

<强> JS Fidle Demo

我正在尝试简化代码以保持其干燥和干净。由于我可以在一个页面上放置 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 窗口为 600px。

Answer 1

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

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

对于如何使用数据而不将 key 放入其中也很奇怪。通常您会使用 data("key") 而不是括号符号

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