javascript - js中点击添加对应div
大家讲道理
大家讲道理 2017-04-11 09:06:55
0
2
348

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

标签名出问题了。

大家讲道理
大家讲道理

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

membalas semua(2)
大家讲道理

主题:自建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<len; i++){
          var curTag = tagLists[i].text(),
              li = doc.createElement("li"),
              li-child-name = doc.createElement("p"),
              li-child-clear = doc.createElement("p");
          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);          
      }

    })
大家讲道理

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

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

其他地方点击添加的时候,就用模板render出来一个,然后添加到choosed-show-content

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan