js简单的实现点击选中点击取消的效果

75 阅读 0 评论 50 点赞

我是靠谱客的博主专注鸡，最近开发中收集的这篇文章主要介绍js简单的实现点击选中点击取消的效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           .square{width:100px;height:20px;border:1px solid black;margin-top: 10px;}
           .selected{background-color:red;}
       </style>
   </head>
   <body>
       <div class="square"></div>
       <div class="square"></div>
       <div class="square"></div>
       <div class="square"></div>
       <script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           $(function(){
               $(".square").each(function(k,v){
                   $(v).click(function(){
                       console.log(124)
                   if(!$(v).is(".selected")){
                       $(this).addClass("selected");
                   }else{
                       $(this).removeClass("selected");
                   }
               });
               });
           });
       </script>