Changing Javascript to Jquery

Question

I used to have two buttons which flicked between thumbs up and down remembered the state and loaded it on refresh. It looked like this.

       var thumbStatus;
        //If thumbs up is tapped change styles of each button and save to     LocalStorage
        function thumbsup() {
        document.getElementById("thumbsup").classList.remove("btn-default")
        document.getElementById("thumbsup").classList.add("btn-success")
        document.getElementById("thumbsdown").classList.remove("btn-danger")
        document.getElementById("thumbsdown").classList.add("btn-default")
        localStorage.setItem('thumbstatus3840210', 'up');
        }

        //If thumbs down is tapped change styles of each button and save to LocalStorage
        function thumbsdown() {
        document.getElementById("thumbsdown").classList.remove("btn-default")
        document.getElementById("thumbsdown").classList.add("btn-danger")
        document.getElementById("thumbsup").classList.remove("btn-success")
        document.getElementById("thumbsup").classList.add("btn-default")
        localStorage.setItem('thumbstatus3840210', 'down');
        }

        //If thumbs up was the last button to be tapped, show this on page load
        function Loadthumbs() {
        if (localStorage.getItem('thumbstatus3840210') === 'up') {
        thumbsup();
        }

        //If thumbs down was the last button to be tapped, show this on page load
        if (localStorage.getItem('thumbstatus3840210') === 'down') {
        thumbsdown();
        }
        }

How can I do this using Jquery. So far I have this. It only styles the buttons At the moment with no saving of data?

 $(function() {
        $("#thumbsup").click(function() {
            $(this).addClass("thumbsup")
            $("#thumbsdown").removeClass("thumbsdown")
        });

        $("#thumbsdown").click(function() {
            $(this).addClass("thumbsdown")
            $("#thumbsup").removeClass("thumbsup")
        });

    }); 

Answer 1

I am guessing this is what you want (your own jQuery doesn't make much sense). I wrote the function in their own place so you could edit them easily or use them in other calls, but you sure can place them directly in the click function. I also think you want to run the loadthumbs function on document ready, so I did that as well.

Also, I used an else-if function. It seems more logical to me than two if functions. Simply an else function is possible as well, but I don't know which values can be given to the item. So just to be safe an else if seems fine.

$(document).ready(function () {
    function thumbsup() {
        $("#thumbsup").removeClass("btn-default").addClass("btn-success");
        $("#thumbsdown").removeClass("btn-danger").addClass("btn-default");
        localStorage.setItem('thumbstatus3840210', 'up');
    }
    function thumbsdown() {
        $("#thumbsdown").removeClass("btn-default").addClass("btn-success");
        $("#thumbsup").removeClass("btn-danger").addClass("btn-default");
        localStorage.setItem('thumbstatus3840210', 'down');
    }
    function Loadthumbs() {
        if (localStorage.getItem('thumbstatus3840210') === 'up') {
            thumbsup();
        }
        else if (localStorage.getItem('thumbstatus3840210') === 'down') {
            thumbsdown();
        }
    }
    Loadthumbs();
    $("#thumbsup").click(function() {
        thumbsup();
    });
    $("#thumbsdown").click(function() {
        thumbsdown();
    });
});

OR:

$(document).ready(function () {
    function Loadthumbs() {
        if (localStorage.getItem('thumbstatus3840210') === 'up') {
            thumbsup();
        }
        else if (localStorage.getItem('thumbstatus3840210') === 'down') {
            thumbsdown();
        }
    }
    Loadthumbs();
    $("#thumbsup").click(function () {
        $(this).removeClass("btn-default").addClass("btn-success");
        $("#thumbsdown").removeClass("btn-danger").addClass("btn-default");
        localStorage.setItem('thumbstatus3840210', 'up');
    });
    $("#thumbsdown").click(function () {
        $(this).removeClass("btn-default").addClass("btn-success");
        $("#thumbsup").removeClass("btn-danger").addClass("btn-default");
        localStorage.setItem('thumbstatus3840210', 'down');
    });
});