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");
  • 相关阅读:
    腾讯一面有感(移动开发岗位)
    kafka 在java中的使用
    Kafka史上最详细原理总结下
    java jdk原生的http请求工具类
    kafka(一)
    MySQL:互联网公司常用分库分表方案汇总
    密码正则
    springboot 打war包
    oracle存储过程的一些使用
    对象的深度克隆
  • 原文地址:https://www.cnblogs.com/jvziking/p/8024306.html
Copyright © 2011-2022 走看看