js遇袭--如何给相同class中的一个赋值

关键字:
this
addClass()
removeClass()

当你想为相同的class中的其中一个赋值时,只需要使用关键字this就可以搞定
例:

           <div class="con_left bianxian">
                <div class="title">
                    <h2 class="title_da xiaoshou">Django</h2>
                    <ul>
                        <li class="title_xiao xiaoshou">AAAA</li>
                        <li class="title_xiao xiaoshou">BBBB</li>
                        <li class="title_xiao xiaoshou">CCCC</li>
                        <li class="title_xiao xiaoshou">DDDD</li>
                        <li class="title_xiao xiaoshou">EEEE</li>
                    </ul>
                 </div>

HTML效果:
image.png

场景是,点击AAAA被选中的颜色改变,其他不变,想给其中一个点击增加效果,需要使用jquery中addClass方法就好

        <script type="text/javascript">
            $(".title_xiao").click(function(){
                $(this).addClass("xuanzhong");
            })
        </script>

这里用到this方法,代表我操作点击的这个对象,不能用class中的内容,那样会被全部选中,如果这样写,就会选中A,再选中C时,A不会被清楚


image.png

所以要在选中前,先清除下已添加的class

        <script type="text/javascript">
            $(".title_xiao").click(function(){
                $(".title_xiao").removeClass("xuanzhong");
                $(this).addClass("xuanzhong");
            })
        </script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容