如上图所示,点击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代码要如何实现呀?
添加点击事件,获取点击target的innerhtml,设置它的css display:none,再把它的innerhtml设置到input的value上