信息調換 - iriliguo－IT工程師數位筆記本

文章出處

實現效果：點擊文字，文字會出現背景顏色；

點擊左移/右移，文字會做出對應移動。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>信息調換</title>
    <script src="../js/jquery-3.1.1.min.js"></script>
    <style>

        body{
            margin: 0px;
            border: 0px;
        }
        .one{
            width: 200px;
            height: 500px;
            border: 1px solid pink;
            float: left;

        }
        .two{
            width: 200px;
            height: 500px;
            border: 1px solid pink;
            float: left;
        }
        .b{
            background-color: dodgerblue;
        }
    </style>
</head>
<body>
<div>
    <div class="one" >
        <p>張三</p>
        <p>李四</p>
    </div>

    <div class="two">

    </div>
</div>
<button>左移</button>
<button>右移</button>

<script>

   $(function () {
       //記錄上一次選中的對象
       var select;
       $("p").click(function () {

           if(select!=undefined){
               //移除上一次選中對象的樣式
               select.removeClass("b");
               //記錄下這次選中的對象
               select = $(this);
               //給這次對象添加樣式
               select.addClass("b")
           }else{//首次選中添加樣式
               //添加樣式
               $(this).addClass("b");
               //記錄這次選中的對象
               select =$(this);
           }

           var info
           //右移
           $("button").eq(1).click(function () {
               info = select.detach();
               //detach() 方法移除被選元素,該方法會保留移除元素的副本，允許它們在以后被重新插入。
               $(".two").append(info);
              //append() 方法在被選元素的結尾插入指定內容
           })
           //左移
           $("button").eq(0).click(function () {
               info = select.detach();
               $(".one").append(info);
           })

       })

   })

</script>
</body>
</html>