0

我对 Web 开发还很陌生，所以我不确定这是否是完成这项任务的最有效方式。

我目前正在写一个在线商店，在产品页面上，我从数据库后端获取了 x 数量的产品。然后我使用结果数组生成动态 html/css 以输出：

while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) {
    echo('
        <div class="box">
            <div class="product"><img src="upload/' . $row['prod_image'] . '" /></div>
            <h3> ' . $row['prod_title'] . '</h3>
            <div class="create-user">
                <p>More Details...</p>
            </div>
            <div class="dialog" title="Basic dialog">
                <p><img src="upload/class.png"/>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the x icon.</p>
            </div>
            <p class="price">Price: <span class="red">£' . $row['prod_price'] . '</span></p>
            <div><a href="#"></a> <a href="#"><img src="images/addtocart.gif" border="0" /></a></div>
            <div class="clearfloat"></div>
        </div>'
    );
}

现在，当您单击“更多详细信息”时，它应该为每个特定产品调用 jQuery 对话框函数以打开“对话框”标签，但这似乎仅适用于第一个产品，不适用于其他产品。

JS代码：

$(function() {
    $( "#dialog").dialog({
        autoOpen: false
    });
    $('#create-user').click(function() {
        $('#dialog').dialog('open');
    });
});

我设法解决了这个问题，但这似乎是一种肮脏的方式，这就是我所做的。我为每个产品添加了一个唯一的 div id，然后使用增量使它们与 JavaScript 保持一致：

$incr = 1;
while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) {
    echo('
        <div class="box">   
            <div class="product"><img src="upload/' . $row['prod_image'] . '" /></div>
            <h3> ' . $row['prod_title'] . '</h3>
            <div id="create-user' . $incr . '">
                <p>More Details...</p>
            </div>
            <p class="price">Price: <span class="red">£' . $row['prod_price'] . '</span></p>
            <div><a href="#"></a> <a href="#"><img src="images/addtocart.gif" border="0" /></a></div>
            <div id="dialog' . $incr . '" title="Basic dialog">
                <p><img src="upload/class.png"/>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the x icon.</p>
            </div>
            <div class="clearfloat"></div>
        </div>'
    );
    $incr++;
}

和 JS 一起去：

$(function() {
    var diag_num = 0;
    while(diag_num < 4) {
        diag_num +=1;
        $("#dialog" + diag_num ).dialog({
            autoOpen: false
        });
        $('#create-user' + diag_num).click(function() {
            $('#dialog' + diag_num).dialog('open');
        });
    }
});

虽然这种方法适用于每页一定数量的产品，并且这样做没有问题，因为无论如何我每页只有大约 10 个（所以我知道我的 vars 长度），我不禁认为这是一种不好的做法。

我还研究过使用“div 类”，然后将所有产品分配给同一个类，使用 jQuery 类选择器找到类“create-user”，然后使用“父”方法以爬回DOM 树找到下一个“对话”类。这可行，但是当您打开一个对话框时，它会在页面上为每个产品打开一个对话框，因此我认为“DIVS”是独一无二的。

我希望这是有道理的。

4

1 回答 1

0 
$('.create-user').click(function(){
$(this).siblings('.dialog').dialog('open');
});

这应该适用于您发布的第一个代码示例。

on click it selects the next item with class dialog and opens it.

the $(this) here stands for the clicked "More Details...". siblings() fetches sll siblings, if you add a selector it filters them by the given selector. as you have wrapped your items in a box no other dialog should be selected.

于 2013-02-19T08:09:24.927 回答