Search jQuery

jQuery Forum

Toggle between two button text and functions on click event with jquery

in Using jQuery • 9 years ago

I am using jQuery to sort my website content Alphabetically or by Most Recent, what I put up so far is working great, but I want a little more from it.

On first click I want my Alphabetically button to sort them accordingly but at the same time, the text to change to Random and on second click to sort them randomly and change the text back to Alphabetically (toggle between the two on click event).

And with the button that sorts them Most Recent, the same thing like the other button but to change the text to Oldest Posts and sort them accordingly.

Here is the jsFiddle with my half of the code, working as it is.

Replies(7)

Godsbest

Re: Toggle between two button text and functions on click event with jquery

9 years ago

Do you have a clue of how the random-sort function would look like?

To alternate, just maintain an variable or a data attribute for each button which stores the current sort order. When you click any of the buttons next, check the variable or data attribute first, then based on the value stored, choose the appropriate (other) sort function.

brillianc..

Re: Re: Toggle between two button text and functions on click event with jquery

9 years ago

Well, I kinda know how that would look like, it would use something like return Math.random() but what I am more interested is how do I apply two functions to toggle on one button, let's say my sort by date button, as it is now :

<button id="numBnt">Most recent</button>
$('#numBnt').on('click', function () {
var numericallyOrderedDivs = $divs.sort(function (a, b) {
return $(a).find("h2").text() < $(b).find("h2").text()?1:-1;
});
$("#container").html(numericallyOrderedDivs);

..it sorts my divs according to Most Recent on first click, well, I want it on second click the text Most Recent to change to Oldest Posts and the sort to go the other way around :

return $(a).find("h2").text() > $(b).find("h2").text()?1:-1;

jakecigar

Re: Toggle between two button text and functions on click event with jquery

9 years ago

http://jsfiddle.net/jakecigar/vhTtJ/6/ <--

sort likes numbers, not booleans.

var $divs = $("div.box").get();
$('#alphBnt').on('click', function () {
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
return $(a).find("h1").text() > $(b).find("h1").text()?1:-1;
})
$("#container").html(alphabeticallyOrderedDivs);
});
$('#numBnt').on('click', function () {
var numericallyOrderedDivs = $divs.sort(function (a, b) {
return $(a).find("h2").text() < $(b).find("h2").text()?1:-1;
});
$("#container").html(numericallyOrderedDivs);
});

JΛ̊KE

brillianc..

Re: Re: Toggle between two button text and functions on click event with jquery

9 years ago

Thanks for that heads up, but how do i get the second function on the second click of the same button? Let's say for the "Cele mai recente" which is the sort by most recent date, on second click I would like it to sort by the oldest date, the other way around.

Also, on second click, how do I toggle from "Cele mai recente" (means Most recent) to "Cele mai vechi" (means Oldest posts) ?

jakecigar