當鼠標懸停在glyphicon glyphicon-info-sign上時顯示數據內容

Question

當鼠標在glyphicon標誌上盤旋時，顯示一些信息。代碼現在正在工作，但僅適用於add content。我想使用相同的JQuery代碼進行編輯，刪除..ect。我不想一次又一次地重複Jquery代碼。

如何做到這一點？

HTML：

<input name="add" value="1" type="checkbox" /> 
Add Contents 
<a href="#" title="Add" data-content="1- Problem Report. 2- Maintenance Report. 3- Expeses Report. 4- Add Contract. 5-Items"> 
    <span class="glyphicon glyphicon-info-sign" id="add_inf"></span> 
</a> 

<input name="edit" value="1" type="checkbox" /> 
Edit Contents 
<a href="#" title="Edit" data-content="1- Problem Report. 2- Maintenance Report. 3- Expeses Report. 4- Contract."> 
    <span class="glyphicon glyphicon-info-sign" id="edit_inf"></span> 
</a> 

<input name="delete" value="1" type="checkbox" /> 
Delete Content 
<a href="#" title="Delete" data-content="1- Problem Report. 2- Maintenance Report. 3- Expeses Report. 4- Contract. 5-Items"> 
    <span class="glyphicon glyphicon-info-sign" id="delete_inf"></span> 
</a> 

JQuery的：

var $btn2 = $('#add_inf'); 
$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); 

Answer 1

它只是因爲你賦予這些事件只是它爲Add content。

這裏：

var $btn2 = $('#add_inf'); 

你需要將其分配到所有​​S的：

var $btn2 = $('#add_inf, #edit_inf, #delete_inf'); 

甚至更​​好的使用類：

var $btn2 = $('.glyphicon.glyphicon-info-sign'); // or another custom one 

注意，在你的事件，以便顯示彈出窗口不是針對所有事件，而僅針對活動窗口，您需要使用this觸發對象工作：

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

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

注意我是如何改變一個函數的聲明。儘可能使用這一個。 (Why?)