JavaScript Syntax Problem das richtige Element zum Ziel

Question

ich eine JS-Funktion, die mit FadeOut/FadeIn Animation von einem anderen ein Element ersetzt:

$('.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*/ 
}); 

Es funktioniert großartig, wenn das Zielelement ist die folgende:

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

Aber wenn ich einen Eingang in der gleichen <td> wie folgt aus:

<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> 

Dann wird es komplett vermasselt (Element wird multipliziert statt entfernt und andere seltsame Ereignisse). Sicherlich vermisse ich etwas, aber ich kann nicht meinen Finger darauf legen. Ich suche nach etwas Hilfe, um das JS für das <td> einschließlich des Eingangs anzupassen.

Vielen Dank für Ihre Hilfe!

Answer 1

Wenn Sie einen Eingang vor der Spannweite haben, ist die Spanne nicht mehr das erste Kind (der Eingang ist das erste Kind, die Spanne ist das zweite Kind), so span:first-child doesn‘ t passen Sie es an. Verwenden Sie :first anstelle von :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

Hier ist ein Schnipsel zur Unterstützung.

Einfach die Spannweite ausblenden, alte entfernen, neue anhängen, neue einblenden.

Sie können auch einfach den Text des Bereichs mit $ ('. Avatar-name') ändern. 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>