用于更改收音机文本的 jquery 动画

jquery animation to change text of radio

本文关键字：jquery 动画 文本 收音机 用于      更新时间：2023-09-26

我正在尝试引入动画并更改div标签内的文本以及针对单选按钮的文本

我能够用动画更改div的文本但是我无法通过动画更改收音机上的文本

注意 - 没有动画，我能够根据我之前提出的问题做到这一点

这是我作为 HTML 的内容：

<div id="questionBlock">        
    <article>loremipsum dah blah blah </article>
</div>
<label class="block" id="lblFirstOption" for = "sizeSmall"> 
    <input type = "radio" name = "radSize" id = "sizeSmall" value = "small" />small
</label>

适用于简单div 的 Jquery ：

$('#questionBlock article').fadeOut(function() {
    $(this).text(val["carType"]).fadeIn().delay(3000);
});

不适用于标签文本的 Jquery 会用动画更改：

$('#sizeSmall')[0].nextSibling.nodeValue.fadeOut(function() {
    $(this)[0].nextSibling.nodeValue(val["carType"]).fadeIn().delay(3000);
});

有什么想法吗？

.nodeValue 不是一个函数，你只需用赋值来设置它

$(this)[0].nextSibling.nodeValue = val["carType"];

此外，由于您现在使用的是实际的 DOM 对象，因此您不再在 jQuery 链中，因此在调用后链接 fadeIn 和延迟将失败。即使你还在jQuery链中，你也不能淡入/淡出textNodes。您需要将文本包装在另一个元素中，例如 span

.HTML

<label class="block" id="lblFirstOption" for = "sizeSmall"> 
    <input type = "radio" name = "radSize" id = "sizeSmall" value = "small" />
    <span>small</span>
</label>

.js

$('#sizeSmall').next().fadeOut(function() {
    $(this).text(val["cartype"]).fadeIn().delay(3000)
});

$('#lblFirstOption span').fadeOut(function() {      
   $(this).parent().append('<span>TestRadio</span>').fadeIn().delay(3000);
});

现场演示

相关文章：