1

jQueryに関しては、私は真の初心者です。'this'を正しく使う方法がよくわかりません。ほぼ同じことを行うが、要素が異なる3つのコードブロックがあります。'this'を使用してこのコードを削減できるかどうか疑問に思いました。これが私のコードです。

どんな助けでも大歓迎です!!

    $(".shop-links1:contains('Tops')").click(function(){//Sort by tops
        $(".tops").show().appendTo("#tabs-1");
        $(".tunics").hide();
        $(".dresses").hide();
        $("#tabs ul li.a:not(:first)").animate
          ({height:'hide'}, 'slow') 
    });

    $(".shop-links1:contains('Tunics')").click(function(){//Sort by tunics
        $(".tops").hide();
        $(".tunics").show().appendTo("#tabs-1");
        $(".dresses").hide();
        $("#tabs ul li.a:not(:first)").animate
          ({height:'hide'}, 'slow') 
    });

    $(".shop-links1:contains('Dresses')").click(function(){//Sort by dresses
        $(".tops").hide();
        $(".tunics").hide();
        $(".dresses").show().appendTo("#tabs-1");
        $("#tabs ul li.a:not(:first)").animate
          ({height:'hide'}, 'slow') 
    });

ありがとう

クリス

4

1 に答える 1

0

あなたのHTMLを推測すると、おそらくこのようなものがありますか?

<a class="shop-links1">Tops</a>
<a class="shop-links1">Tunics</a>
<a class="shop-links1">Dresses</a>

<div class="tops">
    <!-- ... -->
</div>

<div class="tunics">
    <!-- ... -->
</div>

<div class="dresses">
    <!-- ... -->
</div>

コンテンツ div を行うクラスを追加し、それを「clothing-category」と呼ぶと、次のようになります。

<div class="dresses clothing-category">
    <!-- ... -->
</div>

このようなものはおそらくうまくいくはずです：

$(document).ready(function() {
    $(".shop-links1").click(function(){
        $(".clothing-category").hide();
        // might need to lower-case the text here to get it to match
        $("#"+$(this).text()).show().appendTo("#tabs-1");
        $("#tabs ul li.a:not(:first)").animate
          ({height:'hide'}, 'slow') 
    });
});

うまくいかない場合は、次のように、リンクが制御する div ID の別の属性を持つようにリンクを変更します。

<a class="shop-links1" category="tops">Tops</a>
<a class="shop-links1" category="tunics">Tunics</a>
<a class="shop-links1" category="dresses">Dresses</a>

次に、クリック関数の疑わしい行は次のようになります。

$("#"+$(this).attr('category')).show().appendTo("#tabs-1");

再度編集:topsなどのクラス セレクターを指定していることに気付きtunics、id セレクターを入力しました。さまざまなカテゴリの要素に id を付けたくない何らかの理由がある場合は、クラス セレクターに簡単に変更できます。代わりにこれを行います：

$("."+$(this).attr('category')).show().appendTo("#tabs-1");
// ^--- big difference here

編集:で何を達成しようとしているのか理解できませんappendTo。要素が既に DOM にある場合 (スクリプトで作成していないため、どこかにある必要があります)、それを呼び出すだけ.show()で十分に表示されます。私の理解でappendToは、DOM 内の多くの要素を複製することになり、同じカテゴリの倍数が表示されることになります。それはあなたが望むものですか？もしそうなら、それは非常に奇妙に思えます。

#tabsまた、アニメーション ラインが何を行っているかを把握するために、使用しているマークアップも確認する必要があります。ここでのこの書き直しがアニメーション化されているul&で正しいことを行うかどうかわからないので、私はそれを断念します.li

3番目の編集：これでクリックハンドラーのバインドを解除した後、サイトのchrome開発コンソールでこれをテストしました：$(".shop-links1").unbind('click')。これは、持っている 3 つのクリック ハンドラーとまったく同じように機能します。

$(".shop-links1").click(function(){
    $(".tops, .tunics, .dresses").hide();
    $("."+$(this).text().toLowerCase()).show();
    $("#tabs ul li.a:not(:first)").animate
      ({height:'hide'}, 'slow') 
});

私はあなたのタブを理解しましたが、appendTo はあなたが思っていることをしません。それは実際に dom 内の項目を移動し、それらを の後の最初のタブに追加し、空のタグを残して から (またはどちらからでも)<section id="firstNineItems">削除します。マークアップとスタイルの設定方法では、最初のタブが選択されているように見えても、最初のタブに要素を表示する必要はありません。<section id="secondNineItems"><section class="catalogListing">

非表示アニメーションは説明どおりに機能しますが、他のタブをページに戻すものは何もありません. クリアバックアップを配線していないと思います。ページネーションを元に戻す方法がわからない場合は、それを機能させて別の質問をしてください。ただし、最初のスイングではおそらく機能するようです.

その他の 2 つのランダム ポイント:

  1. これは宿題ですか？コミュニティのためだけでなく、あなたのパフォーマンスを評価している誰にとっても、あなたが他人の仕事の功績を認めようとしていないことは明らかです。（以前は質問タグがありましhomeworkたが、投票で忘却されたと思います）。
  2. サイトには多くのインライン スタイルがあります。それらが css ルールに変換されていれば、おそらく将来的に時間を節約できるでしょう。

最後の編集:フィドルを削除し、jquery-ui タブ ウィジェットを削除しました。タブをいくつかのカスタム js、おそらく 25 行程度でやり直しました。必要な html 構造は大きく異なります。<section class="catalogListing">との<div="description">ペアは 1 つのセクションに縮小されており、<section class="first|second|thirdnineItems">タグはありません。フィドルには付加機能がはるかに少ないため、主に、関連する部分を表示するためにディスプレイと戦う必要はありません。マークアップのカタログ リスト セクションは、javascript と一緒に配置できるはずです。残りのフィルター (価格帯、並べ替え、アーティスト、コレクションなど) を機能させるには、コードを調整する必要があります。http://jsfiddle.net/8uYyG/3/

これは SOの 'for'ではないかもしれませんが、楽しかったです。将来的には、フレームワーク ( Ember、Backbone、Knockout (私のお気に入り) など)を使用して、このような単一ページのアプリを作成することを強くお勧めします。幸運を。

于 2013-02-27T20:13:49.867 に答える