Question

我目前正在开发一个网站画廊。我有一个部分，我展示两个不同的作者进行比较，你可以在两个屏幕之间单独传递绘画。请在http://164.132.103.92/comparador_index.php处自己查看（将2个数字放在1到1000之间，然后点击比较器）

我的问题是：有两个按钮以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。

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

1 个答案: