phpstudy集成环境

 首页 > jquery li标签取值赋值问题

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属性。是不是太麻烦了。。

关于楼主说的

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>

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

$(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();
});
<!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">

    $('body').on('click', '.question_keyword li', function(){
        //查找第一个, hasValue 属性不等于 1 的 li
        var target = $('.question_answer li[hasValue!=1]:first');

        //如果没有, 则说明全部都填上内容了
        if(target.length === 0){
            alert('你已经填满了!!!');
            return;
        }

        //找到了, 填上内容, 然后标记为已经填上了
        target.html($(this).text()).attr('hasValue', 1);

    }).on('click', '.question_answer li', function(){
        //清除内容, 标记为还没有填内容
        $(this).empty().attr('hasValue', 0);
    });
</script>
</body>
</html>

根据楼主在评论里提出的新问题, 更新后的答案

<!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>

PS: 为什么问题不能一次性问题完呢?

这个问题，主要是找到 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>
【热门文章】
【热门文章】