Question

我的main.js文件中有一些代码，我一直用它来激活整个页面中的各种popover [bootstrap]按钮。

// popover 1
var $btn1 = $('#btn1');
$btn1.data('state', 'hover');

var enterShow = function () {
    if ($btn1.data('state') === 'hover') {
        $btn1.popover('show');
    }
};
var exitHide = function () {
    if ($btn1.data('state') === 'hover') {
        $btn1.popover('hide');
    }
};

var clickToggle = function () {
    if ($btn1.data('state') === 'hover') {
        $btn1.data('state', 'pinned');
    } else {
        $btn1.data('state', 'hover')
        $btn.popover('hover');
    }
};

$btn1.popover({trigger: 'manual'})
    .on('mouseenter', enterShow)
    .on('mouseleave', exitHide)
    .on('click', clickToggle);


// popover 2
var $btn2 = $('#btn2');
$btn2.data('state', 'hover');

var enterShow = function () {
    if ($btn2.data('state') === 'hover') {
        $btn2.popover('show');
    }
};
var exitHide = function () {
    if ($btn2.data('state') === 'hover') {
        $btn2.popover('hide');
    }
};

var clickToggle = function () {
    if ($btn2.data('state') === 'hover') {
        $btn2.data('state', 'pinned');
    } else {
        $btn2.data('state', 'hover')
        $btn.popover('hover');
    }
};

$btn2.popover({trigger: 'manual'})
    .on('mouseenter', enterShow)
    .on('mouseleave', exitHide)
    .on('click', clickToggle);

但是我添加的按钮（弹出窗口）越多，我必须继续放入main.js的实例越多。

问题：是否有一个乘数可以用来实现这个结果只有一个代码实例而不是每个popover的实例。

Answer 1

问题对我来说不是很清楚，但如果您只是想在不同的按钮上进行相同的初始化，那么只需为它创建一个函数。

function initPopover(selector){
    var $btn1 = $(selector);
    $btn1.data('state', 'hover');

    var enterShow = function () {
        if ($btn1.data('state') === 'hover') {
            $btn1.popover('show');
        }
    };
    var exitHide = function () {
        if ($btn1.data('state') === 'hover') {
            $btn1.popover('hide');
        }
    };

    var clickToggle = function () {
        if ($btn1.data('state') === 'hover') {
            $btn1.data('state', 'pinned');
        } else {
            $btn1.data('state', 'hover')
            $btn.popover('hover');
        }
    };

    $btn1.popover({trigger: 'manual'})
        .on('mouseenter', enterShow)
        .on('mouseleave', exitHide)
        .on('click', clickToggle);
}

Answer 2

不使用事件处理程序中的固定变量名，而是使用$(this)，它引用处理程序绑定的元素：

$('#btn1 #btn2') // <- note that I'm selecting both buttons
  .data('state', 'hover')
  .popover({trigger: 'manual'})
  .on({
    mouseenter: function() {
      if ($(this).data('state') === 'hover') {
        $(this).popover('show');
      }
    },
    mouseleave: function() {
      if ($(this).data('state') === 'hover') {
        $(this).popover('hide');
      }
    },
    click: function () {
      if ($(this).data('state') === 'hover') {
        $(this).data('state', 'pinned');
      } else {
        $(this).data('state', 'hover')
        $(this).popover('hover');
      }
    }
  });

我建议read the jQuery tutorial了解有关事件处理程序的更多信息，其中包含：

除了事件对象之外，事件处理函数还可以通过关键字this访问处理程序绑定的DOM元素。要将DOM元素转换为我们可以使用jQuery方法的jQuery对象，我们只需执行$( this ) [...]

将多个实例压缩成一个

2 个答案: