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

Javascript 如何使用jQuery正确更改href属性?,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试更改鼠标上方链接的href属性。该链接有一个data href属性,该属性包含要与其他地方包含的另一个部分字符串合并的部分字符串,并作为href的值放置 我从下面的脚本中得到的结果是鼠标盖上什么也没有发生。当我第二次将鼠标移到元素上时,新的更新的URL将显示在状态栏中 $('.filters-nav .filter:not([data-href=""])').on( 'mouseover' , function() { var href = $(this).parents('

我正在尝试更改鼠标上方链接的
href
属性。该链接有一个
data href
属性,该属性包含要与其他地方包含的另一个部分字符串合并的部分字符串,并作为
href
的值放置

我从下面的脚本中得到的结果是鼠标盖上什么也没有发生。当我第二次将鼠标移到元素上时,新的更新的URL将显示在状态栏中

$('.filters-nav .filter:not([data-href=""])').on( 'mouseover' , function() {

    var href = $(this).parents('.filters-scroll').attr( 'data-base' );

    $(this).attr( 'href' , href + $(this).attr( 'data-href' ) );

    $(this).attr( 'data-href' , '' );

    //return false;
});
如何在第一次鼠标悬停时更改URL。这是你的电话号码

我正在使用Firefox 27.*

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

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

请参阅我的JSFIDLE,只需删除警报调用,就可以开始了。适用于最新的FF。

尝试以下方法:

$('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','');
});


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

我怀疑URL在您第一次鼠标悬停时实际上正在更改,但您直到第二次才在状态栏中看到新的href。不,不是。当我点击链接时,上一部分被打开。您是否尝试过
mouseenter
?您也可以发布您的html吗?如果你做了什么最有用?为我工作(铬25.x)。但它不适用于Firefox。我猜是某种缓存造成的。为什么这可以解决OP提到的第一次看不到任何事情发生的特定问题。与
prop
的结果相同:(您可以向我们展示您的HTML,或者发布一个JSFIDLE吗?可能是您的DOM并不像您预期的那样。当您执行
console.log($(this).prop)时会发生什么('href'))设置新的
href
属性后?@Derek假设我合并并放置为
href
的两块文本是
http://example.com/something/
mytag
。此脚本现在在状态栏中显示正确的URL,但单击后,我被带到
http://example.com/mytag'而不是
`.This不是我要求解决的原始问题,但事实上是由于这个答案而产生的。有什么想法吗?@Derek在FF和Chrome中检查了这个问题。+1谢谢。它现在可以工作了。这里要提到的一点是,
prop
实际上不是用于
href
,而是用于布尔属性。
$('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','');
});