將Javascript更改爲jquery

Question

我曾經有兩個按鈕，它們在大拇指之間輕彈一下，記住了狀態並在刷新時加載它。它看起來像這樣。

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

我該如何使用Jquery來做到這一點。到目前爲止，我有這個。它只設置按鈕的樣子而沒有保存數據？

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

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

    }); 

Answer 1

我猜這是你想要的（你自己的jQuery沒什麼意義）。我在他們自己的地方寫了這個函數，所以你可以很容易地編輯它們或者在其他調用中使用它們，但是你可以直接將它們放在點擊函數中。我也認爲你想在文檔準備好時運行loadthumbs函數，所以我也這樣做了。

另外，我用了一個else-if函數。如果功能對我來說似乎更合乎邏輯。簡單的一個else函數也是可能的，但是我不知道可以給這個項目賦予哪些值。所以只是爲了安全起見，如果看起來很好。

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