過濾邏輯問題jQuery

Question

我有動態創建包含各種文章信息的div，最重要的是每個div的唯一標籤列表。

<div class="resultblock"> 
     <h3 id="sr-title"><a href="/Code/Details/2">Blog Post</a></h3> 
     <p id="srdescription">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
     <p> 
      Last Updated: 01/01/3001 00:00:00 <span class="resultright"> 
       Author: Kayra</span></p> 
     <p> 
      Project: Kayra <span class="resultright">CMS: 
       Umbraco</span></p> 
     <p class="tag"> 
      Tags: 
<a href="/Code?SearchString=Web%20Forms">Web Forms</a>      | 
<a href="/Code?SearchString=Blog">Blog</a>   </p> 
    </div> 

我也有被動態創建用作按鈕經過篩選的div標籤的完整列表。我希望他們打開和關閉divs;例如，如果用戶點擊Facebook按鈕只能顯示Facebook div，那麼如果用戶再次點擊Facebook，則會顯示所有div。我還希望這些按鈕能夠累積工作，所以如果用戶點擊Facebook和MVC，它只會顯示Facebook和MVC帖子。

<div id="tagbar"> 
     <input type="submit" value="Facebook" class="button" /> <br /> 
     <input type="submit" value="MVC" class="button" /> <br /> 
     <input type="submit" value="Web Forms" class="button" /> <br /> 
     <input type="submit" value="Blog" class="button" /> <br /> 
    </div> 

目前我的jQuery代碼產生了一些奇怪的行爲。點擊一個按鈕會使過濾器正常工作，但不能像以前那樣點擊它並顯示所有帖子。點擊多個按鈕也可以;有時點擊關閉按鈕會工作，但這不一致，有時需要多次點擊才能使用。

我覺得我的代碼的邏輯有些問題，但找不到任何可以幫助我的在線資源。對不起，如果我的問題含糊不清，但是這是因爲我不確定問題出在哪裏，因爲我剛剛開始使用jQuery。

$(document).ready(function() { 

var tags = new Array(); 

// Array Remove - By John Resig (MIT Licensed) 
Array.prototype.remove = function (from, to) { 
    var rest = this.slice((to || from) + 1 || this.length); 
    this.length = from < 0 ? this.length + from : from; 
    return this.push.apply(this, rest); 
}; 

$("#tagbar .button").click(function() { 
    var clickedTag = $(this).val(); //Gets the name of the button clicked 

    if (tags.indexOf(clickedTag) !== -1) { 
     tags.remove(tags.indexOf(clickedTag)); 
     console.log("unclick"); 
    } 
    else { 
     tags.push(clickedTag); 
     console.log("click"); 
    } 
    $(".resultblock").each(function() { 
     var theBlock = $(this); 
     i = 0; 
     $(tags).each(function() { 

      var targetTags = theBlock.find(".tag a").text(); 

      if (!theBlock.hasClass("show") && targetTags.indexOf(tags[i]) !== -1) { 
       $(theBlock).show(); 
       $(theBlock).addClass("show"); 
      } 
      else if (!theBlock.hasClass("show")) { 
       $(theBlock).hide(); 
      }; 
      console.log(tags[i] + " is comparing to " + targetTags + " and resulting in " + (targetTags.indexOf(tags[i]) !== -1)); 
      i++; 
     }); 
     if ($(theBlock).hasClass("show")) { 
      $(theBlock).removeClass("show"); 
     } 
    }); 
}); 
}); 

Answer 1

不知道這是否是問題，但var這意味着其全球，這樣可以產生一些wierdness宣佈你的心不是i。你也不要需要定義自己i你可以從.each得到它：

$(".resultblock").each(function (i) { 
    // now you can use i - this would replace your i=0; setup. 
    // your logic as before  
}); 

Answer 2

你的問題是由於這樣的事實：當tags是空的，不執行內部$(tags).each(...)的代碼。您需要添加額外的代碼來清除過濾器。

Answer 3

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 

<script> 
$(document).on("click",".button",function(e){ 
    if($("."+e.target.id).hasClass("active")) 
    { var i=0; 
     $(".active").each(function(){i++;}) 
     if(i>1) 
     { 
      $(".ondiv").hide(); 
      $(".ondiv").removeClass("active"); 
      $("."+e.target.id).addClass("active"); 
      $("."+e.target.id).show(); 

     } 
     else 
     { 
     $(".ondiv").show(); 
     $(".ondiv").addClass("active"); 
     } 
    } 
    else 
    { 
     $(".ondiv").hide(); 
     $(".ondiv").removeClass("active"); 
     $("."+e.target.id).addClass("active"); 
     $("."+e.target.id).show(); 
    } 

}) 

</script> 



<div id="tagbar"> 
    <input type="button" value="Facebook" class="button " id="Facebook"/> 
    <input type="button" value="Google" class="button " id="Google"/> 
    <input type="button" value="youtube" class="button" id="youtube"/> 
    <input type="button" value="Jquery" class="button " id="Jquery"/> 
</div> 



<div class="Facebook ondiv" style="border:1px solid #000; width:300px; height:200px; float:left"> 
    <b style=" color:red; margin:100px;"> <a href="https://www.facebook.com/profile.php?id=100009644795095">hi i am Facebook</a> </b> 
</div> 
    <div class="Google ondiv" style="border:1px solid #000; width:300px; height:200px; float:left"> 
    <b style=" color:black; margin:100px;"> hi i am Google </b> 
</div> 
    <div class="youtube ondiv" style="border:1px solid #000; width:300px; height:200px; float:left"> 
    <b style=" color:blue; margin:100px;"> hi i am youtube </b> 
</div> 
    <div class="Jquery ondiv" style="border:1px solid #000; width:300px; height:200px; float:left"> 
    <b style=" color:green; margin:100px;"> hi i am Jquery </b> 
</div>