2

jqueryウェイポイントプラグイン（要素がビューポートの上部または下部にあることを通知する）を使用して、ページの背景を動的に変更しようとしています。私のHTMLは単純です-IDが#part1',＃part2'などの複数の見出しがあります。ビューポートの上部にある場合part[x]は、表示したいですimg[x]。

次のコードが機能します。

$("#part2").waypoint(function(event, direction) {
   if (direction === 'down') {
      $(".container").attr("id", "img2");
   }
   else {
      $(".container").attr("id", "img2");
   }
});

ただし、18個の「パーツ」があり、このコードを18回使用したくありません。for私はこのようなループを使ってみました：

var chapters = $("[id^='part']");

for (var i=1; i<=chapters.length; i++){

    $("#part[i]").waypoint(function(event, direction) {
       if (direction === 'down') {
          $(".container").attr("id", "img[i]");
       }
       else {
          $(".container").attr("id", "img[i]");
       }
    });
}

しかし、繰り返しますが、機能していません。私が行ったように、角かっこでセレクターをエスケープすることは可能ですか？そうでない場合、これを達成するための正しい方法は何ですか？

4

3 に答える 3

4

ウェイポイント プラグインが正しく記述されており、複数の要素を処理していると仮定します。

$("[id^='part']").waypoint(function(event, direction) {
    $(".container").attr('id', this.id.replace('part', 'img'));
});

必要に応じて方向チェックを追加します。

私はこのプラグインに精通していませんが、重要な部分は、ウェイポイントプラグインを複数の要素にバインドできる必要があることです。次に、イベントハンドラー内に、イベントthis をトリガーした要素があり、その ID はthis.id.

注意: ID を変更しただけで.containerは、通常、次のような CSS ルールのスタックがない限り、画像は変更されません。

#img1 { background-image: ... }
#img2 { background-image: ... }
...

ただし、その場合は、ID の代わりにクラスを使用する必要があります。要素の ID が存続期間を通じて一定であり、CSS クラスが変更されるのは、より一般的です。

他の CSS クラスがない場合は、代わりに固定 ID を指定し、上記のコードの変形を使用するの.containerが理にかなっています。container

$("[id^='part']").waypoint(function(event, direction) {
    $("#container").attr('class', this.id.replace('part', 'img'));
});

他の CSS クラスを持たないという制約はclass、複数の値を含むことができるため、以前のクラス (それが何であれ) を削除してから新しいクラスを追加するよりも、クラス リストを完全に上書きする方がはるかに簡単であるということです。

于 2013-01-11T23:07:03.323 に答える
1

このように試すことができます

for (var i=1; i<=chapters.length; i++){

    $("#part" + i).waypoint(function(event, direction) {
       if (direction === 'down') {
          $(".container").attr("id", "img" + i);
       }
       else {
          $(".container").attr("id", "img" + i);
       }
    });
}

個別のIDの代わりにcssクラスを使用し、そのようにすることでループは必要ありません

于 2013-01-11T23:03:06.003 に答える
0

代わりに、角かっこを使用する場合は、次のことを行ってください。

$("#part" + i)
"img" + i

次に、IDで選択するだけで、IDを動的に作成します。

于 2013-01-11T23:02:28.393 に答える