单击链接并加载页面JQUERY（Wordpress）后如何更改属性href？答案

【问题标题】：How to change attribute href after click on link and load page JQUERY (Wordpress)?单击链接并加载页面JQUERY（Wordpress）后如何更改属性href？
【发布时间】：2016-06-18 01:47:08
【问题描述】：

当我点击链接并加载页面后单击 URL 时，我尝试更改 URL 链接（href 属性）。我试过这个：

<a href="http://example.com/ASC/" class="sort_loading_country">link</a>

jQuery( ".sort_loading_country" ).click(function() {
    str = jQuery(".sort_loading_country").attr("href") ;
    if ((str.indexOf('ASC') + 1) > 0) {
        new_str = str.replace(/ASC/g, "DESC");    
        jQuery(".sort_loading_country").attr("href", new_str);
    }
});

这会更改 URL，但在单击链接后会打开带有新 URL 的新页面。我想在打开页面并点击链接后更改 URL。我也试过这个：

jQuery(".sort_loading_country").click(function() {
    str = jQuery(".sort_loading_country").attr("href");

    jQuery(document).ready(function() {
        if ((str.indexOf('ASC') + 1) > 0) {
            new_str = str.replace(/ASC/g, "DESC");
            jQuery(".sort_loading_country").attr("href", new_str);
        }
    });

同样的行为，点击链接 - 然后用新网址打开新页面。我希望当我单击带有旧网址的链接打开页面，然后在 href 中将网址更改为新的。我错过了什么吗？有人知道如何在使用旧 URL 加载页面后更改属性 href 吗？

【问题讨论】：

方法#2 不行吗？
你的 a 元素有 2 个 href 属性
您必须将jQuery(document).ready() 包裹在所有对 jQuery 的引用中。它应该是顶级包装器
抱歉，已删除href。是的，way2 不工作:(
任何人都知道如何在使用旧 URL 加载页面后更改属性 href 吗？

标签： javascript jquery html wordpress

【解决方案1】：

主要错误是（如评论中所述），$(document).ready() 需要包装所有 jQuery 代码。

工作jsFiddle

注意：我已经在那个 jsFiddle 中替换了 jQuery 对 $ 的引用。您可以使用任一

【讨论】：

不工作。如果你点击链接打开页面example.com/DESC必须是example.com/ASC
在wordpress中这不起作用，真的很奇怪:(我不明白为什么。我添加了你的代码并添加了这个 (function($) { //code })( jQuery ); for使用 $ 而不是 JQuery()
这个 jsfiddle.net/h7q0z2Lq 在 WORDPRESS 中不起作用，我不明白为什么。我没有任何错误。我使用 JQuery 而不是 $。但是，如果我使用此代码打开页面 example.com/DESC 并且不要将属性 hred ASC 更改为 DESC！

【解决方案2】：

是的 - 所以 onclick 函数在链接被关注之前被调用，所以你正在更改 URL，然后该 URL 被关注。您需要做的是延迟代码的执行，使其在 URL 被跟踪之后发生。

您可以使用 setTimeout 方法来做到这一点，如下所示：

jQuery( ".sort_loading_country" ).click(function() {
    setTimeout(function() {
        str = jQuery(".sort_loading_country").attr("href") ;
        if ((str.indexOf('ASC') + 1) > 0) {
            new_str = str.replace(/ASC/g, "DESC");    
            jQuery(".sort_loading_country").attr("href", new_str);
        }
    }, 1);
});

这将延迟执行您的代码，直到链接被点击之后。

【讨论】：

此外，使用选择器一遍又一遍地获取元素是不好的做法。您应该将 jQuery(".sort_loading_county") 的结果分配给一个变量，然后重用该变量，这样您就不会一遍又一遍地查询 dom 来搜索相同的元素。
在这种情况下不要更改url，打开旧页面，但不要更改属性href:(
这是因为页面正在重新加载 - 您没有在新标签页中打开链接。页面加载后代码无法运行 - 这是一个新页面！您必须改为修改页面服务器端。
如果我在新标签页 url 中打开链接，请不要更改 - 我在属性 href 中有相同的 URL。你有什么想法可以解决这个问题吗？
这个jsfiddle.net/h7q0z2Lq 在 WORDPRESS 中不起作用，我不明白为什么。我没有任何错误。我使用 JQuery 而不是 $。但是，如果我使用此代码打开页面 example.com/DESC 并且不要将属性 hred ASC 更改为 DESC！

【解决方案3】：

与上面类似，第一次单击将是 /ASC/，如果再次单击它将是 /DESC/。

jQuery( ".sort_loading_country" ).click(function() {
	console.log($(this).attr("href"));
    setTimeout(function() {
        str = jQuery(".sort_loading_country").attr("href") ;
        if ((str.indexOf('ASC') + 1) > 0) {
            new_str = str.replace(/ASC/g, "DESC");    
            jQuery(".sort_loading_country").attr("href", new_str);
        }
    }, 1);
    return false;
});

【讨论】：

【解决方案4】：

因此，您需要使用存储，例如，如果用户单击了链接，并且每当他返回时，它将直接更改 href。

<a href="https://example.com/ASC/" class="sort_loading_country">link</a>

if(localStorage.getItem("url", "DESC")){
    str = jQuery(".sort_loading_country").attr("href");

    jQuery(document).ready(function() {
        if ((str.indexOf('ASC') + 1) > 0) {
            new_str = str.replace(/ASC/g, "DESC");
            jQuery(".sort_loading_country").attr("href", new_str);
        }
    });
}
jQuery(".sort_loading_country").click(function() {
    localStorage.setItem("url", "DESC");
    alert(jQuery(".sort_loading_country").attr("href"))
});

JsFiddle 网址

https://jsfiddle.net/8f8dL72v/

【讨论】：

我找到了解决方案 var str = location.href; if (str.indexOf('ASC') + 1){ var new_str = str.replace(/ASC/g, "DESC") jQuery(".sort_loading_country").attr("href", new_str); }