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');

您需要将其分配给所有glyphicon：

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

甚至更好地使用类：

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

请注意，在您的活动中，为了显示popover不是针对所有事件，而是仅针对活动事件，您需要使用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?)

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

1 个答案: