使用 jquery 更改部分链接

Change part of link with jquery

本文关键字：链接 改部 jquery 使用      更新时间：2023-09-26

我正在使用Ransack进行排序。当搜索和排序仅使用 ajax 时，我找不到更改排序链接的方法。所以我正在开发自己的解决方案来更改链接和其他一些东西。

到目前为止，我有这个

红宝石 

<%= search_form_for @search, :class=>"search",:id=>"search-menio",:remote=>"true", url: advertisements_path, :method => :get do |f| %>
    <div class="sort-link-css"> 
       <%= sort_link(@search, :price,"CENA", {},{ :remote => true, :method => :get }) %>
   </div>
<%end%>

生成这个：

<div class="sort-link-css">                                     
    <a class="sort_link asc" data-method="get" data-remote="true" href="/lv/advertisements?q%5Bs%5D=price+desc">CENA&nbsp;▲</a>                                             
</div>

我的目标：

当用户单击此链接时，它将更改表示排序顺序的链接类和也表示排序顺序的链接结束。

 asc -> desc
 desc -> asc

然后它提交搜索表单。

问题：第一次单击时，我看到一些闪烁和更改，但是当我尝试第二次单击时，没有任何反应。

我的脚本：

$('.sort-link-css > a').click(function() {
    var className = $(this).attr('class');
    if (className = "sort link asc") {
        $(this).removeClass('sort link asc');
        this.href = this.href.replace('desc', 'asc');
        $(this).attr('class', 'sort link desc');
    } else if (className = "sort link desc") {
        $(this).removeClass('sort link desc');
        this.href = this.href.replace('asc', 'desc');
        $(this).attr('class', 'sort link asc');
    }
    $('.search').submit();
})

我做错了什么？

理想情况下，您可以使用jQuery.hasClass或jQuery.is来确定元素是否具有指定的一个或多个类。

您还需要在导航或提交表单之前更新显示。您可以执行所有这些操作：

$('.sort-link-css > a').click(function(e) {
    // cancel the click  event on the link
    e.preventDefault();
    var $this = $(this);
    if ($this.is('.asc')) {
        this.href = this.href.replace('desc', 'asc');
    } else if ($this.is('.desc')) {
        this.href = this.href.replace('asc', 'desc');
    }
    $this.toggleClass('asc desc');
    setTimeout(function() {
        // I am not sure if you want to load the link href
        // or submit the form; use one of the following
        window.location = $this.get(0).href;
        $('.search').submit();
    }, 100);
});

请尝试使用 hasClass（）。

https://api.jquery.com/hasclass/

$(this).hasClass( "sort link asc" )
好的，

你的jQuery中有很多错误。你class="sort_link asc"实际上是两个类，而不是三个类。我做了一个小提琴，只要试着理解它，你就会明白你哪里出错了：小提琴

$('.sort-link-css > a').click(function () {
    var className = $(this).attr('class');
    console.log(className);
    if (className == "sort_link asc") {
        $(this).removeClass('sort_link asc');
        alert("removed class sort_link asc");
    } else if (className == "sort_link desc") {
        $(this).removeClass('sort link desc');
        this.href = this.href.replace('asc', 'desc');
        $(this).attr('class', 'sort link asc');
    }
    else {
     alert("all tests failed");   
    }
})
相关文章：