开发者社区> 问答> 正文

js中点击添加对应div

screenshot

<div class="choosed-show-content">
    <li class="choosed">
        <div class="choosed-name" id="choosed-name"></div>
        <div class="clear-this">X</div>
    </li>
    <li class="clear-all">清除所有筛选器</li>
</div>

其实就是一个已选标签效果,选取了某个标签,就创建一个这个li.choosed结构,标签里的文字就添加到choosed-name。

$("document").ready(function(){
    $(".second-tag li a").click(function(){
        $(this).toggleClass('choosed');           
    });

    $(".skip-btn").click(function(){  //选择标签后,通过skip-btn确定按钮操作
        var liTextStr = $(".second-tag li a.choosed").text();
        document.getElementById('choosed-name').innerHTML = liTextStr;   
    })
})

问题是如果是多选标签,如何创建多个li.choosed,并将文字分别添加到choosed-name。

screenshot

标签名出问题了

展开
收起
杨冬芳 2016-06-12 16:32:42 2078 0
1 条回答
写回答
取消 提交回答
  • IT从业

    主题:自建li.choosed标签填充到div.choosed-show-content

    //对你的代码稍作修改
        $(".second-tag li a").click(function(){
        
            //把代表被选择的类choosed提升到li上
            $(this).parent.toggleClass('choosed');           
        });
    
        $(".skip-btn").click(function(){  //选择标签后,通过skip-btn确定按钮操作
        
          var doc = document,
              //建立一个documentFrag 用来暂存.second-tag li.choosed的列表         
              documentFrag = doc.createDocumentFragment(),
              //获取选择标签列表
              tagLists = $(".second-tag li.choosed"),
              //选择标签最终展示父框
              tagContainer = $(".choosed-show-content");
              
          //假如选择了标签    
          if(tagLists){
            var len = tagLists.length, i;
            for(i = 0; i<len; i++){
              var curTag = tagLists[i].text(),
                  li = doc.createElement("li"),
                  li-child-name = doc.createElement("div"),
                  li-child-clear = doc.createElement("div");
              li.className = "choosed";
              li-child-name.className = "choosed-name";
              li-child-name.textContent = curTag;
              li-child-clear.className = "clear-this";
              li-child-clear.textContent = "&times;";
              li.appendChild(li-child-name);
              li.appendChild(li-child-clear);
              documentFrag.appendChild(li);
              li = "";
              li-child-name =""; 
              li-child-clear ="";             
            } 
            //通过documentFrag把所有的选择标签一起添加到tagContainer
            tagContainer.append(documentFrag);          
          }
    
        })
    
    
    2019-07-17 19:34:30
    赞同 展开评论 打赏
问答分类:
问答地址:
相关产品:
问答排行榜
最热
最新

相关电子书

更多
JavaScript面向对象的程序设计 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载