1

問題のコードは次のとおりです。

$(".navItems>ul>li").live('click', function() {
  var selectorID = $(this).attr('id');
  $(".infoList").slideUp('fast', function(){
    switchTabInfo(selectorID);
  });
  function switchTabInfo(selectorID){
    var actionID = selectorID.substring(4);
    actionID = "#" + actionID;
    $(actionID).slideDown();
  }
})

要するに、私はこれらの.infoListクラスを持っており、ID名はnav li IDに関連付けられています。そのリスト項目の ID は、たとえば nav_testsHistory のようになります。すべてのコンテンツ ボックスがクラス名で非表示になっているため、この JavaScript を使用すると、上下にスライドする効果が得られます。

しかし、3 番目のコンテンツ ボックスは、3 番目のボックスを押した後、2 番目のボックスと同様にちらつきます。不要な2回目の上下スライド。

次のようなアラートを追加すると:

$(".navItems>ul>li").live('click', function(){
  var selectorID = $(this).attr('id');
  $(".infoList").slideUp('fast', function(){
  switchTabInfo(selectorID);
  alert('bubble');
});

アラートが 3 回発生する!?

そのため、私の調査は、イベント バブルについて読むことになりました。私が見つけられないのは、それが発射されたかどうかを確認する方法です。入力値を設定して、ネストされたスライダー アクションの周囲で tf テストを実行しようとはしていません。それは粗雑だからです。

詳細については、上記のすべてのコードは関数内にあり、ドキュメントの準備ができたときに呼び出される init() 関数内にあります。jquery 1.3.2 以外の js ファイルはこれだけです。

皆さんはどう思いますか？

4

2 に答える 2

1

あなたの問題はバブルではないと思いますが、セレクターにあります。クラスごとに選択しているので、すべてのクラスがそのアニメーションを実行します (3 つすべて、これが 3 つのアラートを受け取る理由です)。

この場合、次のように考えます。

$(".infoList").slideUp('fast', function(){
  switchTabInfo(selectorID);
});

あなたが望むかもしれないのはこれです：

$(".infoList:visible").slideUp('fast', function(){
  switchTabInfo(selectorID);
});

現在、すべてを選択しclass="infoList"て上にスライドさせています。表示されているものだけを非表示にする場合は、:visibleセレクターを追加します。A.stop()は、次のような全体的なキューの問題も解消します。

$(".navItems>ul>li").live('click', function() {
  var selectorID = $(this).attr('id');
  $(".infoList:visible").slideUp('fast', function(){
    $("#" + selectorID.substring(4)).stop().slideDown();
    switchTabInfo(selectorID);
  });
})
于 2010-03-20T00:56:01.973 に答える
0

$(".infoList")はどのコンテキストにもバインドされていないため、他のli要素にもそれらがありslideUp、すべてに対して発砲する可能性があります。

次のように変更できます。

$(".infoList", this).slideUp...
于 2010-03-20T00:56:58.833 に答える