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

まず第一に、すべての写真を隠すことを避けるために、セレクターではなく（ここを見てください！）を使用することができます。写真付きのブロックに2つのクラスを割り当てるだけです。このようなもの

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

次に、あるカテゴリを非表示にするための1つのジェネリック関数を作成できますが、同じコードを数回複製することはできません。

于 2013-01-17T20:57:51.337 に答える
0

あなたはこれを試すことができます：

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

これが、CSSを介したフィルタリングに役立つと私が見つけたアプローチです。リンクのデータ属性を使用してフィルターを指定するのが好きです。まず、いくつかのリンクを含むナビゲーションと、いくつかの画像または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（）も機能する可能性があります。

「すべて」のフィルターを有効にするために、その特定のタグのデータフィルター属性を記述せず、JSが何をすべきかを知っていることを確認しました（if / elseを確認してください）。

覚えておくべき重要なことは、ポートフォリオアイテムで使用されるクラスとdata-filter属性の間のリンクです。始めるのはとても簡単ですが、終わる前にもう少し複雑になると思います:)

試してみるjsfiddleは次のとおりです：http：//jsfiddle.net/w4VWm/

幸運を！

于 2013-01-17T20:54:14.807 に答える
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

すべて非表示にし、新しいクラス名をフィルター文字列に追加してから、フィルター文字列で表示します

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 に答える