Question

我仍然在学习jQuery，并遇到了一些我似乎无法解决的问题。我正在尝试在位于页面其他位置的div中切换复选框的标签。到目前为止，只有在取消选中该复选框时，我才设法附加标签，但如果取消选中，我无法弄清楚如何仅删除该过滤器的文本。有什么建议吗？

JQUERY：

  $('.filter-single').on('click', function () {
    if ($('.filter-single input').is(':checked')) {
      $('<li>'+$(this).text()+' / </li>').appendTo('.filters-current');
    } else {
    // what goes here?
    }
  });

FILTER HTML：

 <div class="checkbox filter-single">
   <input type="checkbox" value=".rain"/>
   <label>Rain</label>
 </div>

标签HTML：

<div class="filter-details">
    <span class="filter-title">Filters:</span>
    <ul class="filters-current"></ul>
</div>

Answer 1

<强> Demo

您可以使用:contains()查找相应的LI然后.remove()，我也会将点击处理程序分配给输入本身而不是像这样的容器：

$('.filter-single input').on('click', function () {
    if ($(this).is(':checked')) {
        $('<li>' + $(this).next("label").text() + ' /</li>').appendTo('.filters-current');
    } else {
        $(".filters-current").find("li:contains('" + $(this).next("label").text() + " /')").remove();
    }
});

Answer 2

类似的东西：

$('.filters-current').html("");

这应该将内部html设置为空字符串。

Answer 3

我猜你试图实现几个过滤器，如果不是Taleeb的答案应该有效。如果你确实在寻找几个，你可以尝试这样的事情：

var filters={};  
        $('input:checkbox').on('click', function () {
            var filter_name = $(this).siblings("label").text();
            if($(this).is(":checked")){
                filters[filter_name]=true;
            }else{
                filters[filter_name]=false;
            }
            displayFilters();
      });

    function displayFilters(){
        $(".filters-current").html("");
        console.log(filters)
        for (var filter in filters){
            if(filters[filter]){
                $(".filters-current").append("<li>"+filter+"</li>")
            }
        }
    }

演示：http://jsfiddle.net/juvian/X65wv/

jQuery基于复选框状态在div中切换文本

3 个答案: