필터 로직 문제 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를 on/off 토글하고 싶습니다. 예를 들어 사용자가 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

이 문제입니다,하지만 i 밤은 그 어떤 wierdness을 생산 할 수 있도록 var은 글로벌을 의미 선언 확실하지. 또한 당신은 당신이 .each에서 그것을 얻을 수 i를 직접 정의 할 필요가없는 :

$(".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>