Javascript：带有两个对话框的页面无法正常工作

Question

我目前正在开发一个网站画廊的绘画作品。我有一个部分展示了两个不同的作者进行比较，您可以在其中分别在两个屏幕上的画作之间传递。在http://164.132.103.92/comparador_index.php 亲自查看（输入 1 到 1000 之间的 2 个数字，然后点击比较）

我的问题是：有 2 个按钮以 jquery 对话框的形式显示每幅画的个人信息。左侧对话框有效；即使代码相同，右侧也会出现在屏幕底部。我不明白我的问题，有人可以帮助我吗？ comparador.php

<div class="col_half">
<!-- 1st button and image block-->
    <div id="imageDiv" style="margin-top: 5%; margin-bottom: 1%;">
        <br>
        <br>
        <img src="" class="pop" id="imagen" alt="" style="width: 650px; height: 520px;">
        <button type='button' id="prev" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-arrow-left"></span></button>
        <button type='button' id="next" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-arrow-right"></span></button>
        <button type='button' id="info" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-info-sign"></span></button>
        </div>
    </div>
    <div class="col_half col_last">
    <!-- 2nd button and image block-->
        <div id="imageDiv_cuadro2" style="margin-top: 5%; margin-bottom: 1%;">
        <br>
        <br>
        <img src="" class="pop2" id="imagen_2" alt="" style="width: 650px; height: 520px;">
        <button type='button' id="prev_2" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-arrow-left"></span></button>
        <button type='button' id="next_2" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-arrow-right"></span></button>
        <button type='button' id="info_2" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-info-sign"></span></button>
        </div>
    </div>

    <div id="dialog" class="box follow-scroll dialog" title="Información de la imagen">
        <table class="table">
            <tr id="nombre">
                <td>Nombre del autor</td>
                <td><label id="aut"></label></td>
            </tr>
            <tr id="titulo">
                <td>Titulo de la obra</td>
                <td id="t"></td>
            </tr>
            <tr id="anno">
                <td>Año</td>
                <td id="a"></td>
            </tr>
            <tr id="sop">
                <td>Soporte</td>
                <td id="s"></td>
            </tr>
            <tr id="museo">
                <td>Museo</td>
                <td id="m"></td>
            </tr>
        </table>
    </div>
    <div id="dialog2" class="box follow-scroll dialog" title="Información de la imagen">
        <table class="table">
            <tr id="nombre2">
                <td>Nombre del autor</td>
                <td><label id="aut2"></label></td>
            </tr>
            <tr id="titulo2">
                <td>Titulo de la obra</td>
                <td id="t2"></td>
            </tr>
            <tr id="anno2">
                <td>Año</td>
                <td id="a2"></td>
            </tr>
            <tr id="sop2">
                <td>Soporte</td>
                <td id="s2"></td>
            </tr>
            <tr id="museo2">
                <td>Museo</td>
                <td id="m2"></td>
            </tr>
        </table>
    </div>

imagen.js

$(function(){
    $( "#dialog" ).dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "blind",
            duration: 1000
        },
            resizable: false,
            position: { my: "left", at: "left+15", of: window }
    });
    $( "#info" ).on( "click", function() {
        $( "#dialog" ).dialog( "open" );
    });
    $( "#dialog2" ).dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "blind",
            duration: 1000
        },
            resizable: false,
            position: { my: "right", at: "right+15", of: window }
    });
    $( "#info_2" ).on( "click", function() {
        $( "#dialog2" ).dialog( "open" );
    });
});  

信息工作正常，它随着绘画而变化，隐藏不完整的行......唯一的问题是对话框的显示方式。

Answer 1

问题解决了。代码没有问题，只是刷新浏览器和删除 cookie 的问题。我讨厌浏览器不接受更新的 .js。