javascript - HTML 数组上的淡入/淡出

Question

我正在尝试在移动 View 上切换两个电话号码。

我有一个淡入和淡出设置。我可以在控制台中记录 HTML 应该是什么，但是它不会切换到显示它应该是什么。它只是保持原状。

我的 jQuery 函数如下:

// Switch Phone Numbers On Mobile...
var html_array = [
    "<a href='tel:01'><span class='text-uppercase t-fsemibold t-white'>24 Hour </span><span class='t-white text-uppercase'>Emergency Helpline</span> <span class='t-dark t-fbold'>01</span></a>",
    "<a href='tel:02'><span class='text-uppercase t-fsemibold t-white'>Main </span><span class='t-white text-uppercase'>Office Number</span> <span class='t-dark t-fbold'>02</span></a>"
];

var index = 0;

(function animate(){
    $(".header-emergency__mobile").fadeOut(1000, function(){
        index = (index + 1) % html_array.length;
        console.log(html_array[index]);
        this.html = html_array[index];
    }).fadeIn(1000, animate);
})();

HTML 如下:

<div class="header-emergency header-emergency__mobile">
    <a href="tel:01"><span class="text-uppercase t-fsemibold t-white">24 Hour </span><span class="t-white text-uppercase">Emergency Helpline</span> <span class="t-dark t-fbold">01</span></a>
</div><!-- /.header-emergency -->

如果我将 this.html 更改为 this.text，它只会输出 HTML。所以我怀疑我需要进行某种形式的格式化，否则我的 HTML 无效。

感谢任何帮助。

Answer 1

尝试:

$(this).html(html_array[index]);