原生js 多用途三元表达式点赞按钮

最新推荐文章于 2023-05-14 22:05:30 发布

阿狸lyinshaofeng

最新推荐文章于 2023-05-14 22:05:30 发布

阅读量374

点赞数

分类专栏：笔记文章标签： javascript html servlet

本文链接：https://blog.youkuaiyun.com/lyinshaofeng/article/details/127950869

版权

笔记专栏收录该内容

27 篇文章

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           #app{
               display: inline-block;
               border: 1px solid lightblue;
               border-radius: 10px;
               padding: 10px;
           }
           img{
               vertical-align: middle;
           }
       </style>
   </head>
   <body>

       <span id="app">
           <img id="img" src="./img/liked.png" alt="">
           <span id="info">点赞</span>
       </span>


       <script>
           var outer = document.getElementById("app");
           var img = document.getElementById("img");
           var span = document.getElementById("info");

           var like = localStorage.getItem("like")=="true"?true:false; //false

           img.src= like?"./img/liked.png":"./img/like.png";
           span.innerText= like?"取消":"点赞";

           outer.οnclick=function(){

               like=!like;
               localStorage.setItem("like", like);

               img.src= like?"./img/liked.png":"./img/like.png";
               span.innerText= like?"取消":"点赞";

           }

       </script>


   </body>
</html>