jquery li标签取值赋值问题
<div class="question_answer">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="question_keyword">
<ul>
<li>你</li>
<li>说</li>
<li>什</li>
<li>么</li>
<li>呢</li>
<li>你</li>
<li>说</li>
<li>什</li>
<li>么</li>
<li>呢</li>
<li>你</li>
<li>说</li>
<li>什</li>
<li>么</li>
<li>呢</li>
<li>你</li>
<li>说</li>
<li>什</li>
<li>么</li>
<li>呢</li>
<li>你</li>
<li>说</li>
<li>什</li>
<li>么</li>
</ul>
</div>我希望实现的效果是，点击class为question_keyword下的每个li标签，会将点击的这个li标签中的text（）传给class为question_answer下的li标签。同时如果传入的text（）数量超过了class为question_answer下的li标签数量，程序会提示不能点击。请问该如何写jquery才是最简便的呢？我网上查询好像是需要给li标签设置attr属性。是不是太麻烦了。。
展开
收起
1
条回答
写回答
写回答
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="question_answer"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="question_keyword"> <ul> <li>你</li> <li>说</li> <li>什</li> <li>么</li> <li>呢</li> <li>你</li> <li>说</li> <li>什</li> <li>么</li> <li>呢</li> <li>你</li> <li>说</li> <li>什</li> <li>么</li> <li>呢</li> <li>你</li> <li>说</li> <li>什</li> <li>么</li> <li>呢</li> <li>你</li> <li>说</li> <li>什</li> <li>么</li> </ul> </div> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> //标记为空 $('.question_answer li').attr('hasValue', ''); $('body').on('click', '.question_keyword li', function(){ //查找第一个, hasValue 属性为空的 li var target = $('.question_answer li[hasValue=""]:first'); //如果没有, 则说明全部都填上内容了 if(target.length === 0){ alert('你已经填满了!!!'); return; } //产生一个唯一ID var id = 'r_' + Math.random().toString().substr(2) + new Date().getTime(), self = $(this); //把这个id给自己 self.attr('id', id); //找到了, 填上内容, 然后再把这个id 赋值给 answer 区域里的 li target.html(self.text()).attr('hasValue', id); //隐藏当前点的这个 self.css('visibility', 'hidden'); }).on('click', '.question_answer li', function(){ var self = $(this); //清除内容, 标记为还没有填内容 self.empty(); //将与之对应的那个显示出来 $('#' + self.attr('hasValue')).css('visibility', 'visible'); self.attr('hasValue', ''); }); </script> </body> </html>2019-07-17 19:17:09赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
