用 jquery 替换 href link 不起作用

Question

我想用 jquery

替换我的 href

我知道 Internet 上有很多关于此的内容，但它对我不起作用。我用液体工作，我调查过这是否是问题所在，但事实并非如此

我现在有这个：

$(document).ready(function(){
    $('a[href^="https://support.beefinity.com/support/tickets"]').each(function(){ 
        var oldUrl = $(this).attr("href"); // Get current url
        var newUrl = oldUrl.replace("https://support.beefinity.com/support/tickets/filter/page/", "https://support.beefinity.com/support/tickets/filter?page="); // Create new url
        $(this).attr("href", newUrl); // Set new href value
    });
});

这应该行得通，至少行得通 here。

这里是我的一部分HTML，希望够用

{% for part in paginate.parts %}
      {% if part.is_link %}
        <li>
          <a rel="prev start" href="{{ part.url }}" id="page-number">
            {{ part.title }}
          </a>
        </li>
      {% else %}
        {% if part.title == paginate.current_page %}
          <li class="active" id="page-number">
            {{ part.title }}
          </li>
        {% else %}
          <li>
            <a rel="start" id="page-number"> {{ part.title }}</a>
          </li>
        {% endif %}
      {% endif %}
    {% endfor %}

有人可以帮我解决这个问题吗？

编辑 1

我应该说我用的是 Freshdesk

编辑 2

我从 HTML 得到的结果：

<li>
   <a rel="prev start" href="/support/tickets/filter/page/2?requested_by=0&amp;url_locale=&amp;wf_filter=all" id="page-number">
            2
          </a>
</li>

编辑 3

好吧，我必须说得更清楚了。我会很好地解释整个问题。

我使用 Freshdesk 创建支持站点，Freshdesk 使用 liquid（我现在用它进行分页）但我错误地link 无法转到下一页。

Freshdesk 告诉我用 jquery 解决这个问题，但我不想成功

我现在只添加一个片段（希望错误也会出现在这里）

$(document).ready(function() {
  $('a[href^="/support/tickets/page/"]').each(function() {
    var oldUrl = $(this).attr("href"); // Get current url
    var newUrl = oldUrl.replace("/support/tickets/page/", "/support/tickets?page="); // Create new url
    $(this).attr("href", newUrl); // Set herf value
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pagination pagination-centered">
      <ul>
        
          <li class="disabled">
            <span class="disabled">« Previous </span>
          </li>
        

        
          
            
              <li>
                <a rel="start" id="page-number"> 1</a>
              </li>
            
          
        
          
            <li>
              <a rel="prev start" href="/support/tickets/page/2?url_locale=" id="page-number">
                2
              </a>
            </li>
          
        

        
          <li class="next_page">
            <a rel="next" href="/support/tickets/page/2?url_locale=">
              Next »
            </a>
          </li>
        
      </ul>
    </div>

Answer 1

由于 jquery 不起作用，更好的解决方案是使用 liquid to do the replacement。例如：

{{ "Take my protein pills and put my helmet on" | replace: "my", "your" }}

会产生

Take your protein pills and put your helmet on

更改模板以在生成 HTML 之前进行替换：

{% for part in paginate.parts %}
      {% if part.is_link %}
        <li>
          <a rel="prev start" href="{{ part.url | replace: "support/tickets/filter/page/", "support/tickets/filter?page=" }}" id="page-number">
            {{ part.title }}
          </a>
        </li>
      {% else %}
        {% if part.title == paginate.current_page %}
          <li class="active" id="page-number">
            {{ part.title }}
          </li>
        {% else %}
          <li>
            <a rel="start" id="page-number"> {{ part.title }}</a>
          </li>
        {% endif %}
      {% endif %}
    {% endfor %}

Answer 2

您正在查找以特定值开头的 link：

$('a[href^="https://support.beefinity.com/support/tickets"]')

但是您的 link 不是以该值开头的：

<a rel="prev start" href="/support/tickets/filter/page/2?requested_by=0&amp;url_locale=&amp;wf_filter=all" id="page-number">

从您的选择器和字符串操作逻辑中删除 "https://support.beefinity.com" 和 it works:

$(document).ready(function() {
  $('a[href^="/support/tickets/filter/page/"]').each(function() {
    var oldUrl = $(this).attr("href"); // Get current url
    var newUrl = oldUrl.replace("/support/tickets/filter/page/", "/support/tickets/filter?page="); // Create new url
    $(this).attr("href", newUrl); // Set herf value
  });
});

编辑： 看来您还需要更新 URL 以用 & 替换原来的 ? 说明符，因为您正在添加一个新的 ?。东西 like this:

$(document).ready(function() {
  $('a[href^="/support/tickets/filter/page/"]').each(function() {
    var oldUrl = $(this).attr("href"); // Get current url
    var newUrl = oldUrl.replace("?", "&");
    newUrl = newUrl.replace("/support/tickets/filter/page/", "/support/tickets/filter?page="); // Create new url
    $(this).attr("href", newUrl); // Set herf value
  });
});

Answer 3

首先，我想指出您的代码存在的一个问题：您的 jsfiddle 代码不正确：旧 URL:

<a rel="prev start" href="https://support.beefinity.com/support/tickets/filter/page/2?requested_by=0&url_locale=&wf_filter=all" id="page-number">2</a>

替换后的新URL：

<a rel="prev start" href="https://support.beefinity.com/support/tickets/filter?page=2?requested_by=0&url_locale=&wf_filter=all2?requested_by=0&url_locale=&wf_filter=all" id="page-number">2</a>

其次，当您 jQuery 脚本运行时，您的 DOM 可能还没有准备好。这意味着 jQuery 可能没有找到任何带有选择器的 "A" 标签。尝试添加控制台日志。

Answer 4

试试这个，确保你修复 url 查找：

$(document).ready(function(){
$('body').on('click','a[href^="https://support.beefinity.com/support/tickets"]', function(){
    var oldUrl = $(this).attr("href"); // Get current url
    var newUrl = oldUrl.replace("https://support.beefinity.com/support/tickets/filter/page/", "https://support.beefinity.com/support/tickets/filter?page="); // Create new url
    $(this).attr("href", newUrl).click(); // Set new href value
    location.href = newUrl;
});

});

用 jquery 替换 href link 不起作用

Replacing href link with jquery does not work

html

jquery

liquid