0

jQueryアニメーションに現在問題があります...これが私が現在行っていることです...変更すると、選択した値を4つの異なるtbodyタグ（領域）を持つテーブルに入れたい4つの複数選択メニューがありますIDでユニークにしました。4 つの異なる tbody 領域が必要な理由は、表示しているデータの性質によるもので、特定の順序である必要があります。とにかく、私の本当の問題は、ユーザーがメニューの値を変更または修正したときに、イベントをキャプチャし、クリックされたメニューを特定し、その値 (または値) を取得して、テーブルの適切な部分に表示することです。(そして、選択に関連する規則のために) おしゃれにするために、以前のメニュー選択をフェードアウトさせ、新しい選択をフェードインさせたいと思います。

コードを削除しましたが、機能しますが、関数を実行する (または選択メニューの 1 つをクリックする) たびに、新しいコンテンツが 2 倍に複製されます。古いコンテンツは単にフェードアウトし、新しいコンテンツはフェードインします...しかし、1行ではなく2行あります。新しいコンテンツを実行すると、コンテンツがフェードアウトし、4つの新しい行が作成されます。これは私が持っているものの最小化されたバージョンです...なぜコンテンツが複製されているのですか、私は愚かですか？

$(document).ready(function() {
    changeTable();
});


  function changeTable(){

    var selectArray = ["cat", "catOpt", "tariff", "tariffOpt"], // these are the IDs of the select menus...
        i;

    for(i=0;i<selectArray.length;i++){
        $("#" + selectArray[i]).click(function () {
            if(this.id == "cat"){
                $('#dynamicTableHolder #dtCats').find("td").fadeOut(1000, function(){ 
                    $(this).parent().remove(); // due to problems with jQuery we have to fadeOut the TDs then remove the TR
                    $('#dynamicTableHolder #dtCats').append('<tr><td>'  + $("#cat").val() + '</td><td></td></tr>').hide().fadeIn(1000); // Now let's fade in some new content
                });
            }
        }); 
    }       
  }

ここにJSfiddleがあるので、問題を見ることができます...

http://jsfiddle.net/itaksmack/xKZfr/1/

4

1 に答える 1

1

あなたの問題はこの行にあります：

$('#dynamicTableHolder #dtCats').find("td")

これは複数の を見つけているため、コードは...tdごとに実行されますtd

このアプローチを試すことができます - これはテーブルの現在の行を置き換えます: http://jsfiddle.net/xKZfr/2/

于 2012-04-18T11:10:30.590 に答える