jquery基於複選框狀態在div中切換文本

我仍然在學習jQuery，並遇到了一些我似乎無法解決的問題。我試圖切換位於頁面其他位置的div中複選框的標籤。到目前爲止，我已經設法追加標籤只有當複選框未選中，但我不知道如何刪除文本該篩選器只有，如果它變成未選中。有什麼建議？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>

LABEL HTML：

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

來源

2014-03-18 88 MPG

Demo

您可以使用:contains()來尋找相應的李再.remove()，另外我想分配click處理程序來輸入本身，而不是容器是這樣的：

$('.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(); 
    } 
});

來源

2014-03-18 19:04:57

正是我一直在尋找的那就沒辦法了！每天學些新東西：） –

喜歡的東西：

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

這應該將內部html設置爲空字符串。

來源

2014-03-18 18:57:01 Taleeb

如果他試圖用幾個過濾器 – juvian

我想你正試圖實施幾個過濾器，如果不是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/

來源

2014-03-18 19:05:19 juvian

jquery基於複選框狀態在div中切換文本

回答

相關問題