javascript - js中点击添加对应div

问题描述

问 题

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

标签名出问题了。

解决方案

主题：自建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);          
      }

    })

这篇关于javascript - js中点击添加对应div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！