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。我希望他们能够打开和关闭div;因此，例如，如果用户点击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未声明为var，表示其全局，因此可能产生一些诡计。此外，您不需要自己定义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>

过滤逻辑问题jQuery

3 个答案: