老师，这样可以吗？

来源：4-10 自由编程

慕丝5187111

2018-11-28 17:27:14

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>
    <style type="text/css">
      .box{
        width: 300px;
        height: 300px;
        background: pink;
      }
      .smallbox{
        display: none;
        width: 100px;
        height: 100px;
        background: lightblue;
      }
    </style>
</head>
<body>
   <input type="button" name="button" value="添加"/>

   <ul>
     <li>111</li>
     <li>222</li>
     <li>333</li>
     <li>444</li>
   </ul>
   
    <script src="https://cdn.bootcss.com/zepto/1.1.7/zepto.min.js"></script>
    <script>
        /*此处写代码*/
       $(document).ready(function(){

          var num = $('ul li').length;
          console.log(num);

          $('ul').on('mouseover','li',function(){
            $(this).css({'backgroundColor':'red'})
          }).on('mouseout','li',function(){
            $(this).css({'backgroundColor':''})
          })

          $('input').on('click',function(){

            num++;
            var addLi = document.createElement('li');
            addLi.innerHTML = 111*num;
            $('ul').append(addLi)
          })

       })
    </script>
</body>
</html>

写回答

2回答