更改链接的一部分与jquery。

I am using Ransack for sorting. I couldn't find way to change sorting links when search and sorting uses just ajax. So I am developing my own solution to change link and some other stuff.

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

So far I have this

到目前为止我有这个

Ruby

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%>

that generates this :

产生:

<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>

My goal:

我的目标:

When user clicks on this link it will change link class that represents sorting order and end of the link that also represents sorting order.

当用户单击此链接时，它将更改表示排序顺序的链接类和同样表示排序顺序的链接的末尾。

 asc -> desc
 desc -> asc

And then it submits search form.

然后它提交搜索表单。

Problem: For first click I see some blinking and changes, but when I try second click nothing happens.

问题:第一次点击时，我看到一些闪烁和变化，但是当我尝试第二次点击时，什么也没有发生。

My script:

我的脚本:

$('.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();
})

What I am doing wrong ?

我做错了什么?

3 个解决方案

#1

Ideally you would use jQuery.hasClass or jQuery.is to determine if an element has the specified class or classes.

理想情况下，您应该使用jQuery。hasClass或jQuery。确定元素是否具有指定的类或类。

You also need to update the display before navigation or form submit. You can do all this:

您还需要在导航或表单提交之前更新显示。你可以做到这一切:

$('.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);
});

#2

Please try using hasClass().

请尝试使用hasClass()。

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

$(this).hasClass( "sort link asc" )

#3

Ok there are quite a few mistakes in your jQuery. You class="sort_link asc" are in fact two classes and not three. I have made a fiddle, just try to understand it and you will see where you are going wrong: FIDDLE

jQuery中有很多错误。类="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");   
    }

})

#1