Question

我正在尝试在移动视图中的两个电话号码之间切换。

我有一个fade in和fade out设置。我可以在控制台中登录HTML应该是什么，但是不会切换为显示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]);

Answer 2

您需要先将html内容添加到正文。如果需要隐藏它，请尝试不使用display，而稍后在DOM准备好并加载了内容时，请使用fadeIn和fadeOut。

这些功能需要应用于已加载的html内容。这就是为什么您无法在同一操作中添加html内容和fadeIn / Out的原因。

Answer 3

尝试一下

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() {
    console.log("animate");
    index = (index + 1) % html_array.length;
    $(this).html(html_array[index]);
  }).fadeIn(1000, animate); 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 4

<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>
<div class="header-emergency header-emergency__mobile" style="visibility:hidden">
    <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>
</div>

$('.header-emergency__mobile').toggle(1000);

有关切换的更多信息，请参见here

请注意，这未经测试，可能包含一些代码错误，但将向您展示如何轻松解决这种情况

淡入/淡出HTML数组

4 个答案: