用jQuery淡入淡出的內容fadeIn/fadeOut

我有一個jQuery動畫的當前問題......這就是我目前正在做的......我有四個多個選擇菜單，當更改時我希望將選定的值放在表中其中有4個不同的tbody標籤（區域），我用ID做了獨特的標籤。我需要4個不同的tbody區域的原因是由於我顯示的數據的性質，它必須按照一定的順序。無論如何，我真正的問題是，當用戶更改或修改我希望捕獲事件的菜單值時，確定點擊了哪個菜單，獲取其值（或值）並將其顯示在表格的相應部分。現在要時髦（並且由於與選擇相關的規則），我希望淡出之前的菜單選擇並淡入新的選擇。用jQuery淡入淡出的內容fadeIn/fadeOut

我已經剝離了我的代碼以及我的工作原理，但每次運行該功能（或單擊其中一個選擇菜單）時，新內容都會被重複兩次。舊的內容簡單地消失，新的內容然後淡入......但不是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/itakesmack/xKZfr/1/

來源

2012-04-18 Mike Sav

爲什麼不使用類來添加'click'偵聽器 - 會節省大量的代碼！你可以包括起始HTML ...或事件更好地創建一個http://jsfiddle.net – ManseUK 2012-04-18 10:52:39

你的問題是這一行：

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

這是找到多個td這麼你代碼正在執行按td ...

你可以嘗試這種方法 - 這取代了表中的當前行：http://jsfiddle.net/xKZfr/2/

來源

2012-04-18 11:10:30 ManseUK

「這是找到多個tds，所以你的代碼每td執行」這是我尋找的amswer ...你先生，是個紳士！ – 2012-04-18 11:21:50

@MikeSav沒有probs ...只是爲了將來的參考 - 我發現它通過提醒'$（'＃dynamicTableHolder #dtCats'）。find（「td」）。length' ... – ManseUK 2012-04-18 11:22:42

用jQuery淡入淡出的內容fadeIn/fadeOut

回答

相關問題