简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
javascript - js中点击添加对应div
大家讲道理
大家讲道理 2017-04-11 09:06:55
0
2
236

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

其实就是一个已选标签效果，选取了某个标签，就创建一个这个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。

标签名出问题了。

大家讲道理
大家讲道理

光阴似箭催人老，日月如移越少年。

reply all(2)
大家讲道理
大家讲道理2017-04-11 09:08:55 2 floor

主题：自建li.choosed标签填充到p.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
Like +0
Add Reply
大家讲道理
大家讲道理2017-04-11 09:08:55 1 floor

代码不完整，不晓得是否正确理解你的意思了

这个适合用tmpl来做，handbar之类的，把li.choosed做成一个模板

其他地方点击添加的时候，就用模板render出来一个，然后添加到choosed-show-content
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！