0

我是 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>
4

5 回答 5

0

不确定你想要什么样的过渡，但这会用很少的 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>
于 2013-01-17T20:56:29.287 回答
0

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

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

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

于 2013-01-17T20:57:51.337 回答
0

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

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
}
于 2013-01-17T21:12:37.880 回答
0

这是我发现对通过 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>

请注意每个 a 标记如何具有您希望用作过滤器的类名作为数据过滤器属性。你可以在这里指定多个类，它的工作原理是一样的。例如，“.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”过滤器，我只是没有为特定的 a 标签编写数据过滤器属性，并确保 JS 知道该做什么（检查 if/else）。

要记住的重要一点是投资组合项目上使用的类和数据过滤器属性之间的链接。开始很简单，但我相信在你完成之前它会变得更复杂:)

这是一个可以玩的 jsfiddle：http: //jsfiddle.net/w4VWm/

祝你好运！

于 2013-01-17T20:54:14.807 回答
0

你可以试试这个：

function portfolioItems(filter) {
   $(".portfolio-items.not("+filter+")").fadeOut();
   $("."+filter).fadeIn(); 
}
于 2013-01-17T20:47:02.520 回答