代码之家 › 专栏 › 技术社区 › StuBlackett

在HTML数组上淡入/淡出

html jquery javascript

StuBlackett · 技术社区 · 6 年前

我想在手机视图中切换两个电话号码。

我有一个 fade in 和 fade out 设置。我可以在控制台中登录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是无效的。

感谢您的帮助。

4 回复 | 直到 6 年前

Fobos 6 年前

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>

kallosz 6 年前

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

Ricard Espinàs Llovet 6 年前

Lelio Faieta 6 年前

<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