Question

我是JavaScript和jQuery的新手，所以请温柔地对待我。我试图根据它是否有某个类来动画显示/隐藏几个div。

基本上，我正在为摄影师创建一个网站，并在顶部有一个过滤器列表的投资组合部分，每个div都有一类“投资组合项目”以及所有类别的附加类。，所以家庭/婚礼/儿童/情侣。任何图像都可以有多个类。

我想要做的是点击家庭链接，它会隐藏任何没有家庭类的内容。如果我再单击婚礼，它会关闭当前打开的任何没有婚礼课程的东西，并打开当前关闭的任何有婚礼课程的东西。

我目前使用下面的代码，但这只是关闭所有内容，然后打开那些需要类的代码。另外，我不知道如何添加动画。

function portfolioItems(filter) {
 $(".portfolio-items").hide();
 $("."+filter).show(); }

function initEventHandlers () {
 $(".port-all").click(function () { 
    $(".portfolio-items").show();   
    return false;
 })
 $(".port-wedding").click(function () {
portfolioItems("wedding");
return false;
 })
 $(".port-family").click(function () {
portfolioItems("family");
return false;
 })
 $(".port-kids").click(function () {
portfolioItems("kids");
return false;
 })
 $(".port-couples").click(function () {
portfolioItems("couples");
return false;
 }) }

HTML是......

    <div class="portfolio-container">
        <div class="portfolio-links">
            <a href="#"><img alt="All" class="port-all" src="images/port-all.png" /></a>
            <a href="#"><img alt="family" class="port-family" src="images/port-family.png" /></a>
            <a href="#"><img alt="wedding" class="port-wedding" src="images/port-wedding.png" /></a>
            <a href="#"><img alt="couples" class="port-couples" src="images/port-couples.png" /></a>
            <a href="#"><img alt="kids" class="port-kids" src="images/port-kids.png" /></a>
        </div>
        <div class="portfolio">
            <div class="portfolio-items wedding couples family"></div>
            <div class="portfolio-items kids"></div>
            <div class="portfolio-items wedding kids family"></div>
            <div class="portfolio-items couples"></div>
            <div class="portfolio-items couples kids family"></div>
            <div class="portfolio-items wedding"></div>
        </div>
    </div>

Answer 1

你可以试试这个：

function portfolioItems(filter) {
   $(".portfolio-items.not("+filter+")").fadeOut();
   $("."+filter).fadeIn(); 
}

Answer 2

这是我发现通过CSS过滤有用的方法。我喜欢在链接上使用data属性来指定过滤器。首先，设置带有一些链接的导航和带有一些图像或div的投资组合：

<!-- set up some navigation -->
<nav>
    <a href="#" class="filter">All Photos</a>
    <a href="#" class="filter" data-filter=".family">Family Photos</a>
    <a href="#" class="filter" data-filter=".art">Art Photos</a>
    <a href="#" class="filter" data-filter=".wombats">Wombat Photos</a>
</nav>

<!-- set up a portfolio -->
<div class="portfolio">
    <div class="family item">Some family image or something</div>
    <div class="art item"> Some art image or something</div>
    <div class="wombats item">Some wombat image or something</div>
    <div class="wombats item">Some wombat image or something</div>
    <div class="art item"> Some art image or something</div>
</div>

注意每个标记如何具有您希望用作过滤器作为数据过滤器属性的类名。您可以在此处指定多个类，它们的工作方式相同。例如，“。wombat.family”会让你在你的投资组合中使用DOUBLE过滤器。

这是一个可以帮助您设置过滤的脚本：

//on document ready
$(document).ready(function(){

  //when you click <a> tag in the <nav>
  $("nav a").click(function(e){

    //if the <a> has a data-filter attribute
    if($(this).attr("data-filter")){

         //show all the .items with the class in the data-filter attribute
         $(".portfolio .item"+$(this).attr("data-filter")).show(300);

         //hide all the .items that do not have that class
         $(".portfolio .item:not("+$(this).attr("data-filter")+")").hide(300);

    }else{

      //if there's no data-filter attribute, show all the images
      $(".portfolio .item").show(300);
    }
  });
});

对于这个，我只是在show（）和hide（）函数中使用时间，但fadeIn（）fadeOut（）也可能适合你。

要启用“all”过滤器，我只是没有为该特定标签编写数据过滤器属性，并确保JS知道该做什么（检查if / else）。

要记住的重要事项是项目组合项目上使用的类与数据过滤器属性之间的链接。开始很简单，虽然我确定在你完成之前它会变得更复杂一些：）

这是一个可以解决的问题：http://jsfiddle.net/w4VWm/

祝你好运！

Answer 3

不确定你想要什么样的转换，但是这将使用非常少的jquery进行淡入/淡出：

请注意，您可以删除div中的一些内容，但我不知道您在页面上的其他内容需要什么

小提琴：http://jsfiddle.net/Z5uXP/

    <div class="portfolio-container">
        <div class="portfolio-links">
            <a href="#" data-type="all"><img alt="All" class="port-all" src="images/port-all.png" /></a>
            <a href="#" data-type="family"><img alt="family" class="port-family" src="images/port-family.png" /></a>
            <a href="#" data-type="wedding"><img alt="wedding" class="port-wedding" src="images/port-wedding.png" /></a>
            <a href="#" data-type="couples"><img alt="couples" class="port-couples" src="images/port-couples.png" /></a>
            <a href="#" data-type="kids"><img alt="kids" class="port-kids" src="images/port-kids.png" /></a>
        </div>
        <div class="portfolio">
            <div class="portfolio-items wedding couples family"></div>
            <div class="portfolio-items kids"></div>
            <div class="portfolio-items wedding kids family"></div>
            <div class="portfolio-items couples"></div>
            <div class="portfolio-items couples kids family"></div>
            <div class="portfolio-items wedding"></div>
        </div>
    </div>
    <script>
     $(document).ready(function(){
  var $container = $("div.portfolio-container"),
      $portfolio = $container.find("div.portfolio");

 $container
 .on("click", ".portfolio-links a", function(event){
   var $obj = $(this);
  event.preventDefault();
  $portfolio
   .fadeOut()
  .queue(function(next){
    $($(this)[0]).css("color", "red")
     .removeClass("family wedding couples kids")
     .addClass($($obj[0]).data("type"));
    next();
  })
   .fadeIn();
 });
 });

</script>

<style>
 .portfolio .portfolio-items{
  display: none;
 }
 .portfolio.all .portfolio-items,
 .portfolio.family .portfolio-items.family,
 .portfolio.wedding .portfolio-items.wedding,
 .portfolio.couples .portfolio-items.couples,
 .portfolio.kids .portfolio-items.kids{
  display: block;
 }
</style>

Answer 4

首先，您可以使用非选择器（look here！）来避免隐藏所有照片。只需使用照片为您的块分配两个类。像这样的东西

    <div class="portfolio-items wedding"></div>
    <div class="portfolio-items family"></div>
    <div class="portfolio-items kids"></div>

然后您可以用这种方式重写portfolioItems函数

    function portfolioItems(filter) {
        $(".portfolio-items:not(."+filter+")").hide();
    }

其次，您可以创建一个用于隐藏某个类别的通用函数，但不能多次复制相同的代码。

Answer 5

隐藏全部，将新的类名添加到过滤器字符串，然后按过滤器字符串显示

http://jsfiddle.net/uhCY5/3/

var filters = "";

function portfolioItems(filter) {
    filters += '.' + filter
    $(".portfolio-items").hide();
    $(filters).show();
    $("#filter").text(filters)
}

function initEventHandlers() {
    $(".port-all").click(function () {
        filters = "";
        $(".portfolio-items").show();
        return false;
    })
    // the rest is the same
}

动画显示/隐藏css类

5 个答案: