點(diǎn)擊一個模塊，使它自己消失，讓它的內(nèi)容在其他地方顯示？

如上圖所示，點(diǎn)擊2時獲取它的值，并讓它自己隱藏，在1中顯示獲取的2中的值。再點(diǎn)擊1時，1中的內(nèi)容消失，2中的內(nèi)容再次出現(xiàn)。其他的類似。有沒有哪位大神幫忙解決一下？
代碼如下：
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=eage,chrome=1"/>
    <meta name="viewport"  id="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/common.css"/>
    <script src="js/jquery-1.11.1.min.js"></script>
    <style>
        .answerul{overflow:hidden;padding:20px;}
        .answerul li{width:30px;height:30px;background:blue;border-radius:3px;-webkit-border-radius:3px;float:left;margin-right:15px;margin-bottom:10px;}
        .answerul li input{width:30px;height:30px;background:none;cursor: pointer;text-align:center;font-size:16px;color:#fff;}
        .testul{overflow:hidden;padding:20px;}
        .testul li{width:30px;height:30px;float:left;margin-right:15px;margin-bottom:10px;}
        .testul li i{width:30px;height:30px;background:#204D74;border-radius:3px;-webkit-border-radius:3px;display:block;text-align:center;line-height:30px;font-size:16px;color:#fff;font-style:normal;cursor: pointer;}
    </style>
</head>
<body>
    <ul class="answerul">
        <li>
            <input type="text" readonly class="txt"/>
        </li>
        <li>
            <input type="text" readonly class="txt"/>
        </li>
        <li>
            <input type="text" readonly class="txt"/>
        </li>
        <li>
            <input type="text" readonly class="txt"/>
        </li>
    </ul>
    <ul class="testul">
        <li>
            <i>譚</i>
        </li>
        <li>
            <i>夜</i>
        </li>
        <li>
            <i>一</i>
        </li>
        <li>
            <i>箭</i>
        </li>
        <li>
            <i>工</i>
        </li>
        <li>
            <i>天</i>
        </li>
        <li>
            <i>錦</i>
        </li>
        <li>
            <i>澆</i>
        </li>
        <li>
            <i>葉</i>
        </li>
        <li>
            <i>歸</i>
        </li>
        <li>
            <i>花</i>
        </li>
        <li>
            <i>手</i>
        </li>
        <li>
            <i>上</i>
        </li>
        <li>
            <i>魚</i>
        </li>
        <li>
            <i>遮</i>
        </li>
        <li>
            <i>蛇</i>
        </li>
        <li>
            <i>足</i>
        </li>
        <li>
            <i>方</i>
        </li>
    </ul>
</body>
<script type="text/javascript">
    $(function(){
        $(".testul li").click(function(){
            var txt=$(this).find("i").text();
            $(this).find("i").hide();
        });
    });
</script>

</html>
jq代碼要如何實(shí)現(xiàn)呀？

回答

編輯回答

何蘇葉

先給你寫一個比較簡單了，只是實(shí)現(xiàn)你問的第一個格子的邏輯，后面的判斷需要你自己了，你也可以給他們分別添加id,來控制也可以了，話不多說，給你貼上代碼吃飯去圖片描述

2018年5月16日 07:31

編輯回答

空白格

添加點(diǎn)擊事件，獲取點(diǎn)擊target的innerhtml，設(shè)置它的css display：none，再把它的innerhtml設(shè)置到input的value上

2017年2月4日 15:48

編輯回答

挽歌

邏輯很簡單。首先，消失：即隱藏點(diǎn)擊對象。用 $(this).hide(); 。將內(nèi)容轉(zhuǎn)移到其它地方，這里有兩個對象，一個容器對象，一個內(nèi)容對象。內(nèi)容即 $(this).text() ,容器對象，考慮到你可能是要放四個框逐個放置，可以以數(shù)組的形式記錄下來，逐個放入就好。

2018年7月13日 13:06