Question

我有一个工具，每个标签上有3个标签和一些计数器。选项卡的标题应该有一个徽章，显示该选项卡上的所有计数器的总数。如果总数为0，则不应显示任何徽章。

这一切在Chrome和Firefox中运行良好，但在Safari（OS X和iOS）上我得到了一些我似乎无法调试的非常奇怪的行为。

我的徽章上有一些非常简单的代码：

<li role="presentation">
    <a href="#AB-bulk" aria-controls="AB-bulk" role="tab" data-toggle="tab" class="climb_type_nav">
        Auto-Belay       
        <span class="badge" id="AB-badge"></span>
    </a>
</li>

一些javascript（重新）设置徽章范围的html内容：

// reset badge counts
$.each($('.climb_type_nav').find('.badge'), function (i, x) {
    $(x).empty();
});

// get counts per climb type
$.each($('.input-number'), function (i, x) {
    var climbs = parseInt(x.value, 10);
    if (climbs > 0) {
        var shortName = x.getAttribute('climb_type_short_name');

        if (!ct[shortName]) {
            ct[shortName] = 0;
        }
        ct[shortName] += climbs;
    }
});

// set badge counts
$.each(ct, function (shortName, count) {
    $('#' + shortName + '-badge').html('<b>' + count + '</b>');
});

要复制此小提琴中的行为http://jsfiddle.net/ajLxsLc2/3/：

点击加号更新计数器，或者只需手动输入一个数字，然后点击输入即可 - 您会在第一个标签上看到徽章
点击减号将计数恢复为0 - 您将看到徽章消失
再次点击加号以更新计数器 - 这次徽章不会出现在Safari
要显示徽章，请点击其他标签页或将鼠标悬停在您所依据的标签上

我已经确认HTML值是在徽章的范围内设置的，因为某些原因它在Safari中时没有出现。非常感谢任何帮助！

Answer 1

这是一个有趣的问题。我注意到徽章出现在鼠标上方，所以这似乎解决了这个问题：

    // set badge counts
    $.each(ct, function (shortName, count) {
        $('#' + shortName + '-badge')
            .html('<b>' + count + '</b>')
            .parent().focus().blur();
    });

看看at this updated fiddle

Bootstrap徽章并不总是出现在Safari中

1 个答案: