如何用jQuery正确更改href属性?

时间:2014-03-02 08:19:30

标签: javascript jquery html

我正在尝试在鼠标悬停时更改链接href的{​​{1}}属性。该链接具有.filter属性,该属性包含要与包含在其他位置的另一个部分字符串合并的部分字符串,并将其设置为data-href的值。

我从下面的脚本得到的结果是鼠标悬停没有任何反应。当我第二次将鼠标移到元素上时,状态栏中会出现新的更新URL。

href

如何在第一次鼠标悬停时更改网址。这是jsfiddle

我正在使用Firefox 27。*

2 个答案:

答案 0 :(得分:1)

试试这个:

$('div.filters-nav > a.filter:not([data-href=""])').on('mouseover',function() {
    $(this).prop('href',$(this).parent('.filters-scroll').attr('data-base') + $(this).attr('data-href'));
    $(this).prop('data-href','');
});

<强> DEMO

注意:在FF 27.0.1和Chrome 33.0.1750.117 m中测试

答案 1 :(得分:0)

尝试使用prop()方法设置'href'属性而不是attr()

$('.filters-nav .filter').one('mouseover',  function() {
    var href = $(this).closest('.filters-scroll').attr('data-base');
    $(this).prop('href', href + $(this).attr('data-href'));
});

one()方法添加一个触发一次的事件,并自动删除。这样您就不必使用复杂的选择器。

http://jsfiddle.net/yZ2fN/看到我的JSFiddle,只需删除提醒通话,你应该好好去。适用于最新的FF。