Question

我有一个database的项目列表，每个项目都有'id'，'image'和'price' 我正在构建一个jquery模式框，以便当用户点击第一个产品的图像时，第一个产品的价格应该显示在对话框中。每个产品的图像都是相同的。我正在使用php mysql。到目前为止，这是我的代码。

 echo "<a class='OpenDialog'><img src='pics/phone_2b.png' width='22' height='22'/></a></div>";


echo "<div id='dialog' title='Contact Details'>
        <p>";



echo $row['price'];
        echo "</p>



</div>";
<script type="text/javascript">
    $(document).ready(function () {
        $(".OpenDialog").click(function () {
            $("#dialog").dialog({ hide: { effect: "clip", duration: 200 } },{ closeOnEscape: true },{ show: { effect: "drop", duration: 100 } },
            {modal: true, height: 200, width: 200 });
            $('.ui-widget-overlay').click(function() { $("#dialog").dialog("close"); });
        });

    });
</script>

Answer 1

您的ID（#dialog）应该始终是唯一的，您只需要在产品图片中为您的代码添加ID，然后在div中添加另一个ID来关联它。

工作不好的例子：jsfiddle（你做了什么）

工作示例：jsfiddle

<a class='OpenDialog' id="1"><img src='http://thecybershadow.net/misc/stackoverflow.png' width='32' height='32'/></a>

<a class='OpenDialog' id="2"><img src='http://thecybershadow.net/misc/stackoverflow.png' width='32' height='32'/></a>

<a class='OpenDialog' id="3"><img src='http://thecybershadow.net/misc/stackoverflow.png' width='32' height='32'/></a>

<div class='dialog' id="prod_1" title='Contact Details'>
    <p>Price : 10euros</p>
</div>

<div class='dialog'  id="prod_2" title='Contact Details'>
    <p>Price : 20euros</p>
</div>

<div class='dialog' id="prod_3" title='Contact Details'>
    <p>Price : 30euros</p>
</div>

$(document).ready(function () {
    $(".OpenDialog").click(function (e) {
        e.preventDefault();

        var id = $(this).attr('id');

        $("#prod_"+id).dialog({
            hide: {
                effect: "clip",
                duration: 200
            }
        }, {
            closeOnEscape: true
        }, {
            show: {
                effect: "drop",
                duration: 100
            }
        }, {
            modal: true,
            height: 200,
            width: 200
        });
        $('.ui-widget-overlay').click(function () {
            $("#dialog").dialog("close");
        });
    });

});

将值从数据库传递给jquery

1 个答案: