jquery - 将鼠标悬停在 glyphicon glyphicon-info-sign 上时显示数据内容

Question

当鼠标悬停在字形标志上时，我显示一些信息。该代码现在可以运行，但仅适用于添加内容。我想使用相同的 JQuery 代码进行编辑、删除等。我不想一次又一次地重复 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

它仅适用于添加内容，因为您仅将这些事件分配给它。

这里:

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

您需要将其分配给您的所有 glyphicon:

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?)