communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
javascript - jquery li标签取值赋值问题
PHP中文网
PHP中文网 2017-04-10 16:08:01
0
3
525
<p class="question_answer">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</p>
<p 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>
</p>

我希望实现的效果是，点击class为question_keyword下的每个li标签，会将点击的这个li标签中的text（）传给class为question_answer下的li标签。同时如果传入的text（）数量超过了class为question_answer下的li标签数量，程序会提示不能点击。请问该如何写jquery才是最简便的呢？我网上查询好像是需要给li标签设置attr属性。是不是太麻烦了。。

PHP中文网
PHP中文网

认证高级PHP讲师

répondre à tous(3)
迷茫
迷茫2017-04-10 16:10:01 3 plancher

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

$(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();
});
Comme +0
Ajouter une réponse
左手右手慢动作
左手右手慢动作2017-04-10 16:10:01 2 plancher

这个问题，主要是找到 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>
    <p class="question_answer">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </p>
    <p 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>
    </p>
</body>
</html>
Comme +0
Ajouter une réponse
Ty80
Ty802017-04-10 16:10:01 1 plancher

关于楼主说的

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

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

代码如下

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
<p class="question_answer">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</p>
<p 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>
</p>
<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>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal