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

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％确信每次都可以使用。