將多個實例壓縮爲一個

Question

我在我的main.js文件中使用了一些代碼，用於在整個頁面中激活各種彈出窗口[引導]按鈕。

// 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中的更多的實例。

問題： 是否有一個乘數，我可以用這個結果只用一個代碼實例代替每個彈出窗口的實例。

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更多地瞭解事件處理程序，它說：

除了事件對象，事件處理函數還可以訪問處理程序通過關鍵字012綁定到的DOM元素。爲了將DOM元素轉換爲我們可以使用jQuery方法的jQuery對象，我們只需做$(this) [...]