JQ手机端项目重点总结

1.hasClass判断，显示“已关注/未关注”的重复点击功能

<!-- css -->
    <style>
        .bigBox {
            margin: 0 auto;
            width: 200px;
            height: 100px;
            background-color: yellowgreen;
        }

        .smallBox {
            cursor: pointer;
        }

        .BBox {
            margin: 0 auto;
            width: 100px;
            height: 100px;
            background-color: wheat;
            text-align: center;
            line-height: 100px;
            color: black;
        }

        .NBox {
            margin: 0 auto;
            width: 100px;
            height: 100px;
            background-color: aqua;
            text-align: center;
            line-height: 100px;
            color: black;
        }
    </style>

    <!-- html -->
    <div class="bigBox">
        <div class="smallBox BBox">未点击</div>
    </div>

    <!-- script -->
    <script>
       $('.smallBox').click(function () {
            // 先判断smallBox里有没有BBox，有则移除，再加入NBox，反之...
            if ($('.smallBox').hasClass('BBox')) {
                $('.smallBox').removeClass('BBox').addClass('NBox').html('已点击');
            } else {
                $('.smallBox').removeClass('NBox').addClass('BBox').html('未点击');
            }
        });
    </script>