web前端必学功法之一：用户选择爱好

web前端必学功法之一：用户选择爱好

案例实现效果：

首先做这个页面效果，我们要把页面布局给写好，每个网站做好页面可以解决很大的问题。

css代码，这里的页面采用Grid布局
<style>
        *{
               margin: 0;
               padding: 0;
               border: none;
        }
        li{
              list-style: none;
        }
      .container{
              margin-top: 1em;
              width: 100;
              height: 100;
              /*overflow属性规定当内容溢出元素框时，会发生的事情。auto表示如果内容被修剪，则浏览器会显示滚动条*/
              overflow: auto;
              /*网格布局*/
              /* 指定容器采用网格布局 */
              display: grid;
              /* 定义网格线的名称和网格轨道的尺寸大小 fr表示片段*/ 
              grid-template-columns: 1fr 1fr;
              /* 网格项的最大内容占据网格轨道 */
              grid-template-rows: max-content;
              /*设置行与行之间的间隙的尺寸*/
              gap: 0.5em;
      }
      .container .box{
              padding: 1em;
      }

      .box .item{
            margin-top: 1em;
            border-top: 1px solid #333;
            padding-top: 1em;
            display: grid;
             grid-template-columns: repeat(auto-fit,8em); /*第一个值表示：重复的次数，第二值表示：重复的值  auto-fit:自动适应*/
             gap: 0.5em;
      }
      .item li{
              padding: 0.5em;
              border:1px solid #00ACED;
              text-align: center;
      }
      .item li:hover{
           cursor: pointer;
           color: white;
           background-color: #00ACED;
      }


      #selected li{
            color: white;
           background-color: #00ACED;

      }
      #selected li:hover{
             color: initial;
             background-color: initial;
      }
</style>

html部分：
 <div class="container">
             <div class="box">
                   <h2>从下面选择爱好</h2>
                   <ul id="unselected" class="item">
                        <li>摄影</li>
                        <li>编程</li>
                        <li>游戏</li>
                        <li>文学</li>
                        <li>旅游</li>
                        <li>篮球</li>
                        <li>足球</li>
                   </ul>
             </div>

             <div class="box">
                   <h2>你的爱好：</h2>
                   <ul id="selected" class="item">
                        
                   </ul>
             </div>
        </div>

下面就是js部分：

<script>
        //appendChild: 向父元素中添加一个元素时，以前的位置会被删除，添加的元素会出现在新的位置
          //首先获取ul元素
          var  ulSelect = document.querySelector("#selected");
          var  ul = document.querySelector("#unselected");

          //绑定监听事件
          ul.addEventListener('click',function(ev){
                  //判断是否有子元素，防止一次多选择
                  if(ev.target.childElementCount == 0)
                  ulSelect.appendChild(ev.target)
          },false)

          ulSelect.addEventListener('click',function(ev){
              if(ev.target.childElementCount == 0) ul.appendChild(ev.target);
          },false)
  </script>
   

用户选择爱好总结：

   1.做好这个页面效果并不难，重要的把页面的布局给做好
   2.然后我们要知道appendChild（）方法的属性，用那些作用
   3.appendChild: 向父元素中添加一个元素时，以前的位置会被删除，添加的元素会出现在新的位置
   4.事件的监听addEventListener(参数1，参数2，参数3)，参数1：事件类型，这个事件类型不加on，参数2：回调函数；参数3：false代表事件冒泡，true代表事件捕获。