如果 URL 中有“ccm_order_by_direction=desc”，Javascript 添加参数

Question

我正在尝试找到一种方法，如果

&#filterTop

在 URL 中，则将

ccm_order_by_direction=desc

添加到 URL 末尾。

我认为 JavaScript 是最简单的，但如果有 PHP 方式也可以。

问题是它必须更新现有的页面链接。链接是在后端创建的，我无法直接编辑它们。我知道我以前做过类似的事情，但我不记得信息如何或在哪里。

我已经走到这一步了。我只是不知道下一步该去哪里。

$(document).ready(function() {
  if (window.location.href.indexOf('ccm_order_by_direction=desc') !== -1) {
    let url = '<?= $actual_link ?>';
    url = url.replace('ccm_order_by_direction=desc', 'ccm_order_by_direction=desc&amp;#filterTop');
    var link = document.getElementsByClassName('.page-link');
    link.href = url;
  }
});

需要更新的链接如下所示。

<li class="page-item">
  <a class="page-link" href="/switches-damper-arm-tilt-tip-over-limit?ccm_paging_p=2&amp;ccm_order_by=popular&amp;ccm_order_by_direction=desc">2</a>
</li>

我希望它们看起来像。

<li class="page-item">
  <a class="page-link" href="/switches-damper-arm-tilt-tip-over-limit?ccm_paging_p=2&amp;ccm_order_by=popular&amp;ccm_order_by_direction=desc&amp;#filterTop">2</a>
</li>

Answer 1

如果没有对所有代码进行故障排除，我可以立即看到此行将无法工作：

var link = document.getElementsByClassName('.page-link');
link.href = url;

为此，您需要迭代 - 在这种情况下，我建议使用 querySelectorAll （它将返回一个可迭代的集合列表），然后您可以在 forEach 循环 中进行操作 - 并一一更改链接，但是你正在使用 jQ，所以你可以简单地执行以下操作：

$('.page-link').attr('href', newURL);

哪个（体贴地）会照顾它。但是，我想探索如何在不进行字符串操作的情况下执行此操作，因此我在这里有一个解决方案，它使用 URLSearchParams 来对象化查询字符串，然后允许您使用烘焙方法来替换有问题的项目。我在最后使用decodeURIComponent，因为URLSearchParams 会将符号(? #) 解码为%d4 或其他。

let testUrl = new URL('https://this-example.com?ccm_order_by_direction=desc');

$(document).ready(function() {
  let params = new URLSearchParams(testUrl.search);
  if (params.get("ccm_order_by_direction") === "desc") {
    // change the one you want
    params.set("ccm_order_by_direction", "desc&#filterTop");
    let newURL = testUrl.href + "?" + decodeURIComponent(params.toString())
    $('.page-link').attr('href', newURL);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="page-item">
    <a class="page-link" href="/switches-damper-arm-tilt-tip-over-limit?ccm_paging_p=2&amp;ccm_order_by=popular&amp;ccm_order_by_direction=desc">Inspect this link</a>
  </li>
  <li>
   <a class="page-link" href="/switches-damper-arm-tilt-tip-over-limit?ccm_paging_p=2&amp;ccm_order_by=popular&amp;ccm_order_by_direction=desc">Inspect this link too</a>
  </li>
  
</ul>