点击一个模块,使它自己消失,让它的内容在其他地方显示?

clipboard.png
如上图所示,点击2时获取它的值,并让它自己隐藏,在1中显示获取的2中的值。再点击1时,1中的内容消失,2中的内容再次出现。其他的类似。有没有哪位大神帮忙解决一下?
代码如下:
<!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代码要如何实现呀?

阅读 2.3k
3 个回答

添加点击事件,获取点击target的innerhtml,设置它的css display:none,再把它的innerhtml设置到input的value上

先给你写一个比较简单了,只是实现你问的第一个格子的逻辑,后面的判断需要你自己了,你也可以给他们分别添加id,来控制也可以了,话不多说,给你贴上代码吃饭去图片描述

逻辑很简单。首先,消失: 即隐藏点击对象。用 $(this).hide(); 。将内容转移到其它地方,这里有两个对象,一个容器对象,一个内容对象。内容即 $(this).text() ,容器对象,考虑到你可能是要放四个框逐个放置,可以以数组的形式记录下来,逐个放入就好。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题