javascript - 使用 jquery 更改部分链接

Question

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

到目前为止我有这个

ruby

<%= 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();
})

我做错了什么？

Answer 1

理想情况下，您会使用 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);
});