0

我目前有一个关于 jQuery 动画的问题......这就是我目前正在做的......我有四个多选菜单，当更改时我希望将选定的值放在一个具有 4 个不同 tbody 标签（区域）的表中我用 ID 制作了独一无二的。我需要 4 个不同的 tbody 区域的原因是由于我显示的数据的性质，它必须按一定的顺序排列。无论如何，我真正的问题是，当用户更改或修改我希望捕获事件的菜单的值时，确定单击了哪个菜单，获取其值（或值）并将其显示在表的适当部分。现在为了时髦（并且由于与选择相关的规则），我希望淡出以前的菜单选择并淡入新的选择。

我已经剥离了我的代码和我所拥有的工作，但是每次我运行该功能（或单击其中一个选择菜单）时，新内容都会被复制两次。旧内容只是消失了，然后新内容消失了......但是我有 2 行而不是 1 行。我运行它的新时间我的内容淡出然后创建了 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/

4

1 回答 1

1

您的问题出在这一行：

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

这是找到多个tds 所以你的代码正在执行td...

您可以尝试这种方法 - 这将替换表中的当前行：http: //jsfiddle.net/xKZfr/2/

于 2012-04-18T11:10:30.590 回答