as shown in the figure above, click 2 to get its value, and let it hide itself, showing the value of the obtained 2 in 1. Click 1 again, and the content in 1 disappears and the content in 2 appears again. Others are similar. Is there any big god to help solve it? The
code is as follows:
< 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:-sharpfff;}
.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:-sharp204D74;border-radius:3px;-webkit-border-radius:3px;display:block;text-align:center;line-height:30px;font-size:16px;color:-sharpfff;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 >
how to implement the jq code?
