JavaScript 语法问题以定位正确的元素

Question

我有一个 JS 函数，可以使用 FadeOut/FadeIn 动画将一个元素替换为另一个元素:

$('.avatar-name span').fadeOut("slow", function() {   /*fade out old file-name*/
    $('.avatar-name').append('<span>'+file.name+'</span>');   /*Add file-name*/
    $('.avatar-name span').hide().fadeIn("slow");
    $('.avatar-name span:first-child').remove();   /*remove old file-name now*/
});

当目标元素如下时它效果很好:

<td class="avatar-name">
    <span><?php if(isset($acc_avatar)) echo $acc_avatar;?></span>
</td>

但是当我在同一个 <td> 中输入时像这样:

<td class="avatar-name">
    <input type="hidden" name="acc-avatar" id="acc-avatar" value="">
    <span><?php if(isset($acc_avatar)) echo $acc_avatar;?></span>
</td>

然后它就完全困惑了(元素被相乘而不是被删除和其他奇怪的事件)。当然，我错过了一些东西，但我无法指出它。我正在寻找一些帮助来使 JS 适应 <td>包括输入。

谢谢你帮助我!

Answer 1

当你在span之前有一个输入时，span不再是第一个子元素(输入是第一个子元素，span是第二个子元素)，所以span:first-child不会不匹配吧使用 :first 而不是 :first-child。

$('.avatar-name span').fadeOut("slow", function() {   /*fade out old file-name*/
    $('.avatar-name').append('<span>'+file.name+'</span>');   /*Add file-name*/
    $('.avatar-name span').hide().fadeIn("slow");
    $('.avatar-name span:first').remove();   /*remove old file-name now*/
});