Question

我在我的html标签中遇到了我的jquery变量有困难。由于某种原因，变量显示在我的div之外。

我有以下代码：

<script>
    $(document).ready(function() {
        setInterval(function() {
            var sec = 30
            var timer = setInterval(function() { 
                $('#hideMsg span').html(sec--);
                if (sec == -1) {
                    $('#hideMsg').fadeOut('fast');
                    clearInterval(timer);
                } 
            }, 1000);
        }, 2000);
    });
</script>
<script>
    $(document).ready(function() {
        setInterval(function() {
            var randomnumber = '<div id="hideMsg"><span>30</span></div>';
            $('#warning_show').html('<div id="message_box2"><h23>Warning!</h23><p>Your account has been Inactive for some time. You will be logged out in  ' + randomnumber + ' seconds.</p><div class="boxclose" id="boxclose" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">&#10006;</div></div>');
        }, 3000);
    });
</script>

<div id="warning_show"></div>

这会产生以下结果：

_ _ _ _ _ _ _  _ _ _ _ _ _ _ _ _ _ _ _ _ _
|                                         |
|   Time runs out in                      |
|_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _|
30 
seconds

我想要的是：

_ _ _ _ _ _ _  _ _ _ _ _ _ _ _ _ _ _ _ _ _
|                                         |
|   Time runs out in 30 seconds           |
|_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _|

有人可以告诉我哪里出错了吗？

Answer 1

仅使用span或使用div：display：inline;

   var randomnumber = '<span id="hideMsg">30</span>';

Fiddle

原因：div是元素的块类型，span是内联的，它以内联方式显示内容。

For difference ,check

Answer 2

由于div是默认的显示块，因此它会转到下一行。

尝试使用span而不是div：

var randomnumber = '<span id="hideMsg"><span>30</span></span>';

或使用css将其显示更改为内联：

#hideMsg{
    display: inline;
}

Answer 3

使用span isntead

var randomnumber = '<span id="hideMsg"><span>30</span></span>';

然后

$('#hideMsg span').html(sec--);

Answer 4

主要问题是，您附加秒数的元素应该是内联的。但是，您可以在此大规模改进逻辑以删除不必要的嵌套setInterval调用。试试这个：

<div id="warning_show">
    <div id="message_box2">
        <h23>Warning!</h23>
        <p>Your account has been Inactive for some time. You will be logged out in <span class="timeout-seconds"></span> seconds.</p>
        <div class="boxclose" id="boxclose">&#10006;</div>
    </div>
</div>

var sec = 3
$('.timeout-seconds').text(sec);

$('#boxclose').click(function() {
    $('#warning_show').hide();
    clearInterval(timer);
});

var timer = setInterval(function () {
    $('.timeout-seconds').text(sec--);
    if (sec == -1) {
        $('#warning_show').fadeOut('fast');
        clearInterval(timer);
        // redirect to login screen...
    }
}, 1000);

Example fiddle

如果需要，可以通过jQuery创建HTML结构。

在html中显示jQuery变量？

4 个答案: