在WordPress中动态修改标记的href属性

时间：2017-02-14 作者：Todor Atanasov

Im使用Wordpress网站的计算表单字段插件。我已经创建了所需的表单，但现在我需要在单击表单下方的按钮时，将表单中计算出的价格动态添加为URL参数。

该网站使用Visual Composer，这是按钮html：

<a class="nectar-button medium accent-color has-icon regular-button" target="_blank" href="https://na2.docusign.net/member/PowerFormSigning.aspx?PowerFormId=df6fbf3d-6f5d-4c48-8965-f4fa810099f4&amp;Institutional_Buyer_AnnualPrice=15000"><span>Purchase Kuali Ready</span></a>
我想根据该领域的价格，动态添加/更改URL中的“机构买家年价格=15000”部分。这是我当前的JavaScript代码：

(function($) {
    document.getElementsByClassName("nectar-button").onclick = function() {
        var link = document.getElementsByClassName("nectar-button");
        var price = $(\'#fieldname9_1\').val();
        link.setAttribute(\'href\',\'https://na2.docusign.net/member/PowerFormSigning.aspx?PowerFormId=df6fbf3d-6f5d-4c48-8965-f4fa810099f4&Institutional_Buyer_AnnualPrice=\' + price);
         return false;
    }
})(jQuery);
以下是页面链接：https://www.kuali.co/products/kuali-ready-online-purchasing/

我在Stackoverflow上找到了3-4个关于同一主题的问题，我已经试过了，但没有一个对我有用，这就是我为什么把这个问题写给wordpress的原因。stackexchange。com公司

p、 请忽略一个事实，即让js代码正常工作将影响目前使用Visual Composer创建的所有按钮。

2 个回复
SO网友:David Lee

试试这个（纯JavaScript）：

var allBtns = document.getElementsByClassName(\'nectar-button\');

function preventDefaultOpenCustomUrl(event)
{
    event.preventDefault();
    var price = document.getElementById("fieldname9_1").value;
    var url = \'https://na2.docusign.net/member/PowerFormSigning.aspx?PowerFormId=df6fbf3d-6f5d-4c48-8965-f4fa810099f4&Institutional_Buyer_AnnualPrice=\' + price;
    window.open(url);
}
;

for (i = 0; i < allBtns.length; i++) {
    allBtns[i].addEventListener("click", preventDefaultOpenCustomUrl);
}
这是将事件添加到所有按钮classname,
使用Jquery：

(function ($) {
    $(\'.nectar-button\').on(\'click\', function (e) {
        e.preventDefault();
        var price = $(\'#fieldname9_1\').val();
        var url = \'https://na2.docusign.net/member/PowerFormSigning.aspx?PowerFormId=df6fbf3d-6f5d-4c48-8965-f4fa810099f4&Institutional_Buyer_AnnualPrice=\' + price;
        window.open(url);
    });
})(jQuery);
如果您没有访问HTML添加ID的权限，可以在selector 选择该特定按钮。

SO网友:Tony Djukic

如果你正在加载这个$( document ).ready() 使用Visual Composer可能会导致JS执行得太早。您是否可以尝试使用$( window ).on( \'load\', function() );?

标签： jquery   javascript   小码农  

相关推荐

如何将jQuery包含到我的插件中，以便在插件页面上使用？

如何将jQuery文件包含到插件中，以便在插件页面上使用它？