为什么有时在移动版本上未定义标题？

Question

我的html是这样的：

//for dekstop
<ul id="my-tab" class="hide-on-med-and-down">
    ...
    <li class="content accent-4">
      ...
    </li>
</ul>

//for mobile
<div id="my-tab-m" class="hide-on-large-only">
    <div class="row my-m-container">
    </div>
</div>

我的 javascript 是这样的：

$('#my-tab>li').each(function () {
    var href = $(this).find('a').attr('href');
    var imgScr = $(this).find('img').attr('src');

    var title
    if(href === 'spec')
        title = 'Spec'
    else if(href === 'app')
        title = 'App'
    else if(href === 'mc')
        title = 'Mc'


    $('<a href="#" data-href="' + href + '"><div class="col s" >'+title+'<div class="my-m-content"><img src="' + imgScr+'" /></div></div></a >').appendTo('#my-tab-m .my-m-container');

});

脚本执行，它工作。如果我在控制台上检查inspect element并选择移动版本，标题显示

但是如果我直接用手机访问，标题有时是清晰的，但标题有时是undefined

存在 3 个选项卡。选项卡 1 和选项卡 2 未定义。选项卡 3 出现。有时会全部出现。这个问题只出现在手机上

我该如何解决这个问题？

Answer 1

更改标题的一种简单方法是：document.title = "Your Title"; 这适用于所有设备，而且我有 99% 的把握它每次都能正常工作。