使用 jQuery 向链接添加参数

Posted

技术标签:

【中文标题】使用 jQuery 向链接添加参数【英文标题】:Add a parameter to a link using jQuery 【发布时间】:2012-08-13 22:29:01 【问题描述】:

我是 javascript/jQuery 的新手。我有以下由框架自动生成的 html 代码。

<tr class="alternate-row">
    <td>17 July, 2012</td>
    <td>AM Shipment</td>
    <td>Generated</td>
    <td>
        <form method="post" action="" id="ListTruckSheets_o_7" class="basic-form" onsubmit="javascript:submitFormDisableSubmits(this)" name="ListTruckSheets_o_7">//I have the name of this form.
            <input type="hidden" name="shipmentId"  value="10310" id="ListTruckSheets_shipmentId_o_7">
            <input type="hidden" name="Report" id="truckSheet_o_7" onclick="javascript:setSelectedRoute(this, 10310);">
            <input type="hidden" name="abstractReport" id="routeAbstract_o_7" onclick="javascript:setSelectedRoute(this, 10310);">
            <input type="hidden" name="milkDeliverySchedule" id="deliverySchedule_o_7"  onclick="javascript:setSelectedRoute(this, 10310);">
            <input type="hidden" name="cancelShipment" id="ListTruckSheets_cancelShipment_o_7">
        </form>
        <td>
            <a class="buttontext" href="/myportal/control/KVGenerateTruckSheet.txt?shipmentId=10310&amp;reportTypeFlag=trucksheet"  target="_blank" onclick="javascript:setSelectedRoute(this, 10310);" title="Report">Truck Sheet Report</a>
        </td>
        <td>
            <a class="buttontext" href="/myportal/control/KVGenerateTruckSheet.txt?shipmentId=10310&amp;reportTypeFlag=abstract" target="_blank" onclick="javascript:setSelectedRoute(this, 10310);" title="Abstract Report">Route Abstract Report</a>
        </td>
        <td>
            <a class="buttontext" href="/myportal/control/MilkDeliveryScheduleReport.txt?hipmentId=10310&amp;reportTypeFlag=milkDeliverySchedule" target="_blank" onclick="javascript:setSelectedRoute(this, 10310);" title="Milk Delivery Schedule">Delivery Schedule</a>
        </td>
        <td>
            <form method="post" action="/myportal/control/cancelLMSShipment" target="_blank"    onsubmit="javascript:submitFormDisableSubmits(this)" name="ListTruckSheets_o_7_0_o_cancelShipment">
                <input name="shipmentId" value="10310" type="hidden">
            </form>
            <a class="buttontext" href="javascript:document.ListTruckSheets_o_7_0_o_cancelShipment.submit()">Cancel</a>
        </td>
</tr>

我使用 onclick 调用了一个 JavaScript 函数,该函数获取 url 并向其添加参数。我有表单的名称或 ID('ListTruckSheets_o_7')。使用表单名称或 Id 我需要找到父 tr 并确定我想要的正确 td 并将参数设置为它的 url。这是我目前正在搞乱的代码。

function setSelectedRoute(existingUrl, shipmentId) 
     var form = $("input[value=" + shipmentId + "]").parent(); //formName: ListTruckSheets_o_7
     var routeId = form.find("option:selected").text();
     var resultUrl = existingUrl + "&facilityId=" + routeId;
     $('.buttontext').attr('href', resultUrl); // this is setting resultUrl to all the .buttontext class elements but I need to set resultUrl to only specific selected td.

所以,可能是,我需要找到父 tr 并返回到特定的 td 并将 resultUrl 设置为它。我不知道该怎么做。我希望我的问题很清楚。

【问题讨论】:

从哪里获取文本? 【参考方案1】:

你可以测试一下:

form
  .closest('tr')   // go parent tr of form
  .find('.specific_selected_td') // find td, here specific_selected_td is 
                                 // assumed class to selected td
                                 // you may have something different 
  .find('a')  // find anchor tag within that specific td
  .attr('href', resultUrl); // set href

修改后

改变

$('.buttontext').attr('href', resultUrl); 

$(existingUrl).attr('href', resultUrl);

这里,existingUrl 指的是被点击的a

【讨论】:

嗨..我现在有一个新问题。 “attr('href', resultUrl);”正在设置新网址。但在每次点击参数('routeId' 我附加到 'existingUrl' 的参数)可能会改变。因此,每次单击时,我都需要用新参数替换旧参数,或者我可能会重新加载页面,但重新加载的问题是用户可能不知道他们之前选择了哪个下拉元素。关于如何做的任何想法。提前谢谢..

以上是关于使用 jQuery 向链接添加参数的主要内容,如果未能解决你的问题,请参考以下文章

jQuery向论文中的导航链接添加类

使用 jQuery 将超链接添加到 WordPress 手风琴标题

向所有链接添加一个参数 - ?和 & 以免链接断开

使用 jQuery 截断链接

如何通过API向山魈模板中的所有链接添加参数?

使用on()jQuery方法将'this'作为参数传递给事件处理程序