zoukankan      html  css  js  c++  java
  • 类似JQuery siblings()的应用

    <div class="course_date">
                <div class="date_month">2017/11</div>
                <ul class="date_day clearfix">
                    <li>
                        <h2></h2>
                        <p class="current_date">26</p>
                    </li>
                    <li>
                        <h2></h2>
                        <p>27</p>
                    </li>
                    <li>
                        <h2></h2>
                        <p>28</p>
                    </li>
                    <li>
                        <h2></h2>
                        <p>29</p>
                    </li>
                    <li>
                        <h2></h2>
                        <p>30</p>
                    </li>
                    <li class="grey_dot">
                        <h2></h2>
                        <p>1<i class="grey_d"></i></p>
                    </li>
                    <li style="margin-right: 0rem;" class="grey_dot">
                        <h2></h2>
                        <p>2<i class="grey_d"></i></p>
                    </li>
                </ul>
            </div>
    <script type="text/javascript">
        $(function(){
            $(".date_day li").click(function(){
                $(this).find("p").addClass("current_date");
                $(this).siblings('li').find("p").removeClass("current_date");
                $(this).siblings(".grey_dot").find("i").addClass("grey_d"); //important
                if ($(this).hasClass("grey_dot")) {
                    $(this).find("p").addClass("current_date");
                    $(this).siblings('li').find("p").removeClass("current_date");
                    $(this).find("i").removeClass("grey_d");
                    $(this).siblings(".grey_dot").find("i").addClass("grey_d")
                }
            })
        })
    </script>

    1、2下面的灰色点需要li点击时隐藏,并且背景颜色为红色,字体为白色,离开时显示,可以参考以上方法

    注意: $(this).siblings(".grey_dot").find("i").addClass("grey_d");
  • 相关阅读:
    计算机网络面试小知识总结(转载)
    williamisnotme@gmail.com
    jdk1,8 HashMap
    Mybatis 为什么不要用二级缓存
    CPU,寄存器,一缓二缓.... RAM ROM 外部存储器等简介
    一级缓存,二级缓存
    mock单测
    java8函数式编程(转载)
    volatile解析
    JVM 技术分享(初级)
  • 原文地址:https://www.cnblogs.com/jvziking/p/8024306.html
Copyright © 2011-2022 走看看