Question

我是网络开发的新手，所以我不确定这是否是实现此任务的最有效方式。

我正在写一个在线商店，在产品页面上，我从数据库后端获取了大量的产品。然后我使用结果数组生成动态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对话框函数以打开“对话框”标记，但这似乎只对第一个产品有效，而对其他产品无效。< / p>

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”独一无二。

我希望这是有道理的。

Answer 1

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

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

单击

选择带有类对话框的下一个项目并打开它。

此处$(this)代表点击的“更多详细信息...”。 siblings（）获取sll兄弟，如果你添加一个选择器，它会按给定的选择器过滤它们。因为您已将项目包装在一个框中，所以不应选择其他对话框。

这个场景的最佳实践是什么 - jQuery＆amp; CSS？

1 个答案: