Question

我有以下主播情况：

<a href="https://example.com/my-account/#example/" class="anchor">...</a>

由于#链接的斜线，上述锚点给了我jQuery冲突。因为这是PHP生成的，所以我正在寻找一种 jQuery Javascript解决方案来删除此锚点href的最后一个字符。我该怎么办？

此jquery冲突的原因是，因为我网站上的＃-链接是并且应该是滚动到ID的属性。因此它滚动到id元素。这是一项功能，我无法更改其构建方式，因此，我看到的唯一解决方案是从锚点中删除最后一个/。

Answer 1

由于＃-link的斜线，上面的锚点给了我jQuery冲突

我建议您应该解决该冲突，因为在URL片段中使用/并没有什么内在的错误。如果这给您带来了错误，那么您需要更正您的逻辑。

话虽这么说，可以通过将一个函数传递给prop()来完成您需要的操作，该函数使用正则表达式删除所有尾部斜杠：

$('.anchor').prop('href', function(i, href) {
  return href.replace(/\/$/, '');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<a href="https://example.com/my-account/#example/" class="anchor">...</a>

Answer 2

您可以将attr()方法与回调一起使用，该方法会在内部对元素进行迭代，其中callback会将旧值作为第二个参数，并将使用返回的值进行更新。

$('.anchor').attr('href', (_, href) => href.slice(0, -1));

$('.anchor').attr('href', (_, href) => href.slice(0, -1));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="https://example.com/my-account/#example/" class="anchor">...</a>

Answer 3

如果必须在Javascript端进行更改，则可以拆分字符串，弹出最后一个元素，然后重新加入...（这假设最后一个字符始终为/，您可以如果情况并非总是如此，则需要进行完整性检查。

let href = $('.anchor').prop('href').split("");
href.pop();
href = href.join("");

console.log(href);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="https://example.com/my-account/#example/" class="anchor">...</a>

从href锚点删除上一个正斜杠

3 个答案: