如何在 HTML 中动态更新一个 div 的内容并保持以前的样式？答案

【问题标题】：How to dynamically update the contents of a div in HTML and maintain the previous style?如何在 HTML 中动态更新一个 div 的内容并保持以前的样式？
【发布时间】：2018-05-10 15:08:16
【问题描述】：

我使用 Flask (Python) 制作了一个仪表板，它显示了我桌面文件夹中的图像。现在，该文件夹将每 5 秒左右更新一次新图像，这就是为什么我想用新图像更新我的网站。我认为使用 Javascript/Jquery AJAX 最适合流畅的用户体验。我成功地使用 Jquery 每 2 秒更新一次仪表板，如下面的代码所示。

但是我的问题是样式丢失。正如您在第一个屏幕截图中看到的那样，Jumbotron 完全位于内部边界内。但在第二张图片中，您可以看到网站的整个中心部分，包括 Jumbotron 和图片从中心略微偏移。图像上的红色标记表示移位。所以，我想知道如何防止 Jquery 改变我的风格。我希望刷新的页面按原样替换上一页。

这是我的代码 -

烧瓶routes.py -

@app.route('/image/<im>')
@login_required
def image(im):
    image_src=[im+'/'+i for i in  os.listdir(os.path.join(app.static_folder,im))]
    rows=math.ceil(len(image_src)/3)
    print(image_src)
    return render_template('dashboard.html',title='Welcome',images=image_src,rows=rows,image_date=im)

HTML - dashboard.html

{% extends "base.html" %}
{% block content %}
<hr>
<div class="container dash-container main-body image-area" >
    <div class="row">
        <br>
        <hr >
        <br>
        <div class="col-md-12">
            <div class="jumbotron ">
                <h1 id="hdr">DASHBOARD</h1>
            </div>
        </div> 
    </div>

{% if images %}

<div class="row" id="info">

    <a href="{{ url_for('dashboard') }}"><span class="glyphicon glyphicon-backward" aria-hidden="true"></span></a>
</div>
<br><br>
<div class="row">
        <div class="col-md-12" id="info">
            {% set ns = namespace(counter=0) %}
            <table class="table table-hover table-condensed table-bordered images-table" cellspacing="5" cellpadding="5">
                {% for row in range(rows) %}
                <tr class="image-hover">
                    {% for data in range(3) %}
                        {% if ns.counter  < images|length %}
                            <td style="width:10%;">
                                <a href="{{ url_for('display',file=images[ns.counter][10:],folder=images[ns.counter][0:10]) }}"><img src="{{ url_for('static',filename=images[ns.counter]) }}" alt="User Image" width="220" height="220"></a>
                                <br>
                                {% set ns.counter = ns.counter + 1 %}
                            </td>
                        {% endif %}
                    {% endfor %}
                </tr>
                {% endfor %}
            </table>
        </div>
    </div>

{% endif %}


</div>

<script type="text/javascript">
    setInterval(function(){
   $('.image-area').load("{{ url_for('image',im=image_date) }}");
}, 2000)

</script>
{% endblock %}

HTML 文件基本上是按行排列图像，每行最多 3 个项目。

CSS - dashboard.css

#info{
    font-size: 23px;
    font-family: 'Saira',sans-serif;
    text-align: center;
    color: black;
}

.dash-container{
    height: 100%;
}
.images-table{ 
    width: auto !important;
    margin-left: 10%;
    margin-right: 10%;
}

.folder-link {
    color:black /*#1cd1ff*/;
    font-size: 30px;
}

table tr.row-hover:hover{
    background-color: #190101;

}
table tr.row-hover:hover .folder-link{
    color:white;
}
table tr.image-hover:hover .folder-link{
    color:black;
}

table tr.row-hover:hover .folder-link:hover{
    color:#00ff83;
}

table.images-table tr.image-hover:hover{
    background-color: black;
}
table.images-table tr.image-hover td:hover{
    background-color: white;
}

这里是图片。 Image 1 是没有任何javascript 的默认网站，Image 2 是ajax 调用后的网站。

我希望刷新后的页面能够完美地覆盖之前的视图，并且不会产生从中心的偏移。

请帮忙。

编辑 1：

我注意到，如果我将 Jquery 中的类选择器替换为“body”标签，样式将被保留。但是，与以前的类型不同，页面刷新需要至少 3 倍以上的时间。

$('.image-area').load("{{ url_for('image',im=image_date) }}");

改为

$('body').load("{{ url_for('image',im=image_date) }}");

这是我的base.html 代码-

<!DOCTYPE html>
<html>
<head>
    {{ moment.include_jquery() }}
    {{ moment.include_moment() }}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/base.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/about.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/index.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/dashboard.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/display.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/feedback.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/login.css') }}">

    <link href="https://fonts.googleapis.com/css?family=Saira" rel="stylesheet">
    {% if title %}
    <title>{{ title }}</title>
    {% else %}
    <title>Welcome_segregator</title>
    {% endif %}
</head>
<body>



    <nav class="navbar navbar-fixed-top  navbar-custom">
    <div class="container" >
    <div class="navbar-header">

            {% if current_user.username %}
            <a class="navbar-brand nav-custom" href="{{ url_for('index') }}" ><span id="header"><span id="logo"><strong>Welcome </strong></span id="header"><strong>{{ current_user.username|striptags }} !</strong></span></a>
            {% else %}
            <a class="navbar-brand nav-custom" href="{{ url_for('index') }}"><span id="header"><span id="logo"><strong>Welcome </strong></span></span></a>
            {% endif %}
    </div>
    <ul class="nav navbar-nav navbar-right " >
            <li class="nav-custom"><a class="nav navbar-nav" href="{{ url_for('index') }}"><span class="glyphicon glyphicon-home "> <span id="header"><strong>Home</strong></span></a></li>
            <li><a class="nav navbar-nav" href="{{ url_for('dashboard') }}"><span class="glyphicon glyphicon-dashboard"> <span id="header"><strong>Dashboard</strong></span></a></li>
            <li><a class="nav navbar-nav" href="{{ url_for('about') }}"><span class="glyphicon glyphicon-user"> <span id="header"><strong>About Us</strong></span></a></li>
            <li><a class="nav navbar-nav" href="{{ url_for('feedback') }}"><span class="glyphicon glyphicon-pencil"> <span id="header"><strong>Feedback</strong></span></a></li>
            {% if current_user.is_anonymous %}
            <li><a class="nav navbar-nav" href="{{ url_for('login') }}"><span class="glyphicon glyphicon-log-in"> <span id="header"><strong>Login</strong></span></a></li>
            {% else %}
            <li><a class="nav navbar-nav" href="{{ url_for('logout') }}"><span class="glyphicon glyphicon-off"> <span id="header"><strong>Logout</strong></span></a></li>
            {% endif %}

    </ul>
      </div>
    </nav>


        {% with messages = get_flashed_messages() %}
        {% if messages %}
        <ul>
            {% for message in messages %}
            <li>{{ message }}</li>
            {% endfor %}
        </ul>
        {% endif %}
        {% endwith %}
        {% block content %}{% endblock %}

</body>
</html>

【问题讨论】：

我可能错了，但每次你 load 和 .image-area 时，你实际上并没有插入 html inside image-area div而不是替换 div？
是的，你可能是对的。我通过创建一个将所有其他 div 包含在 dashboard.html 中的父 div 找到了解决方案。

标签： javascript python jquery ajax flask

【解决方案1】：

根据我上面的评论：我认为您当前对$('.image-area').load("{{ url_for('image',im=image_date) }}"); 的调用导致您嵌套.image-area div。

尝试切换

{% block content %}{% endblock %}

到

<div id='img-cont'>{% block content %}{% endblock %}</div>

然后把你的js改成

$('.img-cont').load("{{ url_for('image',im=image_date) }}");

【讨论】：

是的，它有效。但是，我在 { % block content %} 内创建了一个父 div，它将所有其他代码包含在 dashboard.HTML 中。它奏效了。
很好，但我仍然认为您会以这种方式获得嵌套 div，因此请检查一下，因为它可能会再次绊倒您。
你可能是对的。我会解决这个问题，但对于这个问题，任何一种解决方案都可以。