DRY JS - 如何将相同的JavaScript功能合并为一个?

时间:2015-07-08 02:39:57

标签: javascript jquery twitter-bootstrap popover

我有一个JS函数,它根据按钮id加载相同的re-size函数。

JS Fidle Demo

我正在尝试简化代码以保持干净和干净。由于我可以在一个页面上拥有100多个这样的按钮,我需要以某种方式使代码更具动态性。

    onClickResetAll: function (event) {
                    event.preventDefault();

                    var deletes = [];

                    Object.keys(collections).forEach(function (key) {
                        if (collections.hasOwnProperty(key)) {

                            var coll = collections[key];

                            for (var i = 0; i < coll.models.length; i++) {

                                deletes.push(function (callback) {

                                    var index = i; //i starts at 1, not 0 !!!
                                    coll.models[index].deleteModel(function (err, resp, x) {

                                        console.log(err, resp, x);

                                        if(err){
                                            callback(err);
                                        }
                                        else{
                                            callback(null,null);
                                        }

                                    });
                                });
                            }

                        }
                    });

                    async.parallel(deletes,function(err,results){

                        Backbone.Events.trigger('bootRouter',  '+refreshCurrentPage');

                    });

                }, //end of onClickResetAll callback function

//end

我试过这个,但它只适用于第一个按钮:

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");
});

有什么想法吗?

我需要的是使bootstrap var a = $('.a, .b, .c, .d,').popover(); a.on("show.bs.popover", function (e) { a.data()["bs.popover"].$tip.css("max-width", "630px"); }); 窗口600px。

2 个答案:

答案 0 :(得分: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");

答案 1 :(得分:0)

尝试

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");
  });
});