问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

jquery li标签取值赋值问题

头像
走不了你
    9641925
    头像
    wangfulin
      6.1k1513
      <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属性。是不是太麻烦了。。

      jqueryjavascript
      阅读 15.5k
      3 个回答
      得票最新
      头像
      wangfulin
        6.1k1513

        写的不是很好，但是姑且可以用

        $(document).ready(function(){
  function Answer(curr,num,ele){
    this.curr=curr;
    this.num=num;
    this.ele=ele;
  }
  
  Answer.prototype.getKeyword=function(){
    var keywordItems=$(".question_keyword>ul>li");
    var answer;
    var that=this;
    keywordItems.on("click",function(){
      if(that.curr<that.num){
          answer=$(that.ele).eq(that.curr);
          var text=$(this).text();
          answer.text(text);
          that.curr=that.curr+1;
          console.log(that.curr);
      }else{
          alert("超出限制啦");
      }
    });
  };
  
  var answer=new Answer(0,5,".question_answer>ul>li");
  answer.getKeyword();
});
        头像
        rainbow702
          1495611

          这个问题，主要是找到 answer 下未被填写的li。
          我提供的方法可能比较直接，或者说比较傻一点

          <!doctype html>
<head>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<script type='text/javascript' src='jquery-1.9.1.js'></script>
<script type="text/javascript">
    $(function(){
        $(".question_answer").on("click", "li", function(){
            $(this).text("");
        });
        
        $(".question_keyword").on("click", "li", function(){
            var allLi = $(".question_answer li");
            var blankLi;
            $.each(allLi, function(){
                if($(this).text() == "") {
                    blankLi = $(this);
                    return false;
                }
            })
            if(!blankLi) {
                alert("answer 已满!");
            } else {
                blankLi.text($(this).text());
            }
            
        });
    });

</script>
</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>
</body>
</html>
          头像
          running_all_the_way
            362

            关于楼主说的

            keyword 与 answer 中 li 之间的怎么建立联系

            最简单最快速的方法就是把 keyword > li 在keyword中的索引值存到 answer > li 属性上

            代码如下

            <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</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>
    </ul>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
    $(function(){
        var question_answer_li = $('.question_answer').find('li'),
            question_keyword_li = $('.question_keyword').find('li'),
            answer_max = question_answer_li.length, // 最大选择数
            answer_selected = 0; // 默认选中几个
        $('body')
        .on('click', '.question_keyword li', function(){
            var $this = $(this);

            if ( answer_selected >= answer_max ) {
                alert('不能再选择了');
                return;
            }

            answer_selected++; // 更新已选择数

            $this.css('visibility','hidden');
            question_answer_li.eq(answer_selected-1).text($this.text()).data('index',$this.index()); // 将答案的索引值赋值给data-index，以备之后取消时使用
        })
        .on('click', '.question_answer li', function(){
            var $this = $(this);

            if ( $this.data('index') === '' ) return;

            answer_selected--; // 更新已选择数

            $this.text('').data('index', '');
            question_keyword_li.eq($this.data('index')).css('visibility','visible'); // 通过获取之前传值的 data-index 去查找
        })
    });
</script>
</body>
</html>
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题