JavaScript語法問題爲目標的正確元素

Question

我有一個JS的功能，通過另一與淡出/淡入動畫取代一個元素：

$('.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> 

然後它完全混亂（元素被乘以代替被移除的和其他奇怪的事件）。 當然，我失去了一些東西，但我不能把手指放在它上面。我正在尋找一些幫助，以適應包括輸入在內的<td>的JS。

謝謝你幫助我！

Answer 1

當你有跨度之前的輸入，跨度不再是第一個孩子（的輸入是第一個孩子，跨度是老二），所以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*/ 
}); 

Answer 2

這是一個幫助的片段。

只是淡出跨度，刪除舊的，添加新的，淡入淡出。您可以使用$（'。avatar-name'）。text（「newText」）;來更改跨度的文本。

$('.avatar-name').fadeOut("slow", function() { /*fade out old file-name*/ 
 
    $('.avatar-name span').remove(); /*remove old file-name now*/ 
 
    var newSpan = $('.avatar-name').append('<span>NEW SPAN</span>'); /*Add file-name*/ 
 
    newSpan.fadeIn("slow"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<table> 
 

 
    <tr> 
 
    
 
<td class="avatar-name"> 
 
    <input type="hidden" name="acc-avatar" id="acc-avatar" value="Val"> 
 
    <span>Original span</span> 
 
</td> 
 
    </tr> 
 
    
 
    </table>