ajax调用后jQuery更新li类属性href

Posted 2023-03-05

【中文标题】ajax调用后jQuery更新li类属性href

【英文标题】：jQuery update li class attribute href after ajax call

【发布时间】：2016-02-29 15:06:58

【问题描述】：

我正在使用我的 Wordpress 网站，并且有一个弹出模式窗口，它只显示一些单选按钮 (#input_1_1)。更改单选按钮字段的值时，将运行 ajax 调用并执行简单的 mysql 表更新。一切顺利，我想首先更改用于打开窗口的 href 文本。

下面是我到目前为止得到的 javascript，但是从底部算起的第二个 JQuery 行没有执行我想要的更改。甚至只是尝试更改简单的目标网址。

    jQuery(document).ready(function()
        jQuery("#input_1_1").change(function()
            jQuery("body").css("cursor", "wait");
            var commitmentID = jQuery("#gform_1 input[type='radio']:checked").val();
            jQuery('#popmake-710').popmake('close');
            jQuery.ajax(
                url:"<?php bloginfo( 'wpurl' ); ?>/wp-admin/admin-ajax.php",
                type:'POST',
                data:'action=gf_submit_1_1&commitmentID=' + commitmentID,
                success:function(results)
                
                    //Here is the problem I've been working on for too many hours/days now
                    jQuery("#et-secondary-nav > li.popmake-fast-select-commitment.current_commitment_text.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-563").attr('href',"http://www.TheSameUrlButILikeADifferentTextToIt.com");
                    //See line above
                    jQuery("body").css("cursor", "default");
                
            );
        );
    );

这就是页面那部分的 html 的样子

        <div id="et-secondary-menu">
        <ul id="et-secondary-nav" class="menu">
            <li class="bp-menu bp-profile-nav menu-item menu-item-type-custom menu-item-object-custom menu-item-152"></li>
            <li class="popmake-fast-select-commitment current_commitment_text menu-item menu-item-type-post_type menu-item-object-page menu-item-563" style="cursor: pointer;">
                <a href="http://www.myoriginalurlisjustfine.com/">
                    <i class="wp-svg-heart heart"></i>
                    THIS IS THE TEXT THAT I WANT TO HAVE CHANGED BY THE JQUERY AND IS THE TEXT PRESENTED IN THE SECONDARY WORDPRESS MENU
                </a>
            </li>

【参考方案1】：

当你使用时

jQuery("#et-secondary-nav > li.popmake-fast-select-commitment.current_commitment_text.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-563") 

这只会选择没有href attr的li，所以你需要使用(> a)

jQuery("#et-secondary-nav > li.popmake-fast-select-commitment.current_commitment_text.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-563 > a").attr('href',"http://www.TheSameUrlButILikeADifferentTextToIt.com");

【讨论】：

太棒了。我知道我瞄准了错误的对象。但即使进行了这种更改，对“正确”对象也没有影响。由于我不知道如何更改文本，我只是尝试更改 URL，但没有成功。其次：如何格式化 attr 以保留 URL 但更改文本“这是文本...”？

@JompaBoy 使用 .text() ... $(selector).text('THIS IS THE TEXT');

完美！非常感谢您的输入！ :)

【参考方案2】：

jQuery("#et-secondary-nav > li.popmake-fast-select-commitment.current_commitment_text.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-563").attr('href',"http://www.TheSameUrlButILikeADifferentTextToIt.com");

您在这里选择的是li 而不是a

改成

jQuery("#et-secondary-nav > li.popmake-fast-select-commitment.current_commitment_text.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-563 > a").attr('href',"http://www.TheSameUrlButILikeADifferentTextToIt.com");

【参考方案3】：

使用

jQuery("#et-secondary-nav > li.popmake-fast-select-commitment.current_commitment_text.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-563 a").attr('href',"http://www.TheSameUrlButILikeADifferentTextToIt.com");

更改href。正如其他人指出的那样，您没有更改<a>，而是更改了<li>。

查看https://api.jquery.com/category/selectors/ 以获取有关 jQuery 选择器的参考。