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