jquery - 无法使用 JQuery UI 更新每个选定的产品

Question

背景

在我当前的项目中，我使用 JQuery UI 实现了产品和购物篮。这是我第一次尝试实现 JQuery UI，但我对 JQuery API 已经足够了。该商店将使用 C# 通过 .Net 进行驱动。我在开发上遇到了困难，我搜索了网络的每个角落并翻阅了 JQuery API 的每一页。我只是无法弄清楚代码中的逻辑有什么问题。

我的问题

某些产品有附加选项，需要在发送到购物篮之前进行选择。很公平，所以我实现了一个对话框表单来从用户获取必要的信息(JQuery Dialod Modal)并更新每个产品中的表格。程序上的所有内容都有效，直到我使用用户输入更新相关产品为止。每次更新产品时，只有第一个产品才能获取详细信息。我希望我已经为你们清楚地解释了我的问题...我还在下面添加了一个基本的 fiddle 来模拟相同的问题。我

如果您单击信息图标并点击“添加 handle 首选项”并填写信息，然后再次检查第一个产品，您就会明白我的意思。一切都只打印到第一个产品中。必须有一种方法来写入每个产品。

产品是使用 HTML 无序列表构建的。因此，示例产品如下所示；

HTML

    <li class="ui-widget-content ui-corner-tr" id="100400">
    <h5 class="ui-widget-header">Option 1</h5>

            <font class="repairDetails" alt="Repair Details" style="">DETAIL
            <font style="color:Red; text-decoration:blink; font-size:1em; bottom:10;">Please view product details for <u>handle preferences</u> before sellecting this option.</font>
            </font><br />
            <label class="price">£00.00</label>

            <a class="ui-icon ui-icon-info dialog_but" title="View Product Detail" href="#" style="">View Product Detail</a>
              <div class="dialog_content" title="" style="">

                    <table  style="border:none !important;">
                    <thead>
                    </thead>
                    <tr>
                    <td style="border:none !important; width:15px; height:13px !important;"><span class="ui-icon ui-icon-circle-plus"></span></td>
                    <td style="text-align:left;">
                    DETAIL
                    </td>
                    </tr>

                    <tr>
                    <td style="border:none !important; width:15px; height:13px !important;"><span class="ui-icon ui-icon-circle-plus"></span></td>
                    <td style="text-align:left;">
                    DETAIL
                    </td>
                    </tr>

                    <tr>
                    <td style="border:none !important; width:15px; height:13px !important;"><span class="ui-icon ui-icon-circle-plus"></span></td>
                    <td style="text-align:left;">
                    DETAIL
                    </td>
                    </tr>

                    <tr>
                    <td style="border:none !important; width:15px; height:13px !important;"><span class="ui-icon ui-icon-circle-plus"></span></td>
                    <td style="text-align:left;">
                     DETAIL
                    </td>
                    </tr>

                    <table id="hDetails" class="ui-widget ui-widget-content">
                    <button id="handle-pre" class="handle-pre">Add Handle Preferance</button>

                    <thead> 
                        <tr class="ui-widget-header ">
                        Handle Preferences
                            <th>Handle Shape (Pro, Oval, Round)</th><br />
                            <th>Size - SSH/SH/LH/H etc.</th>
                            <th>Specify handle type if sellected <br />Value package re-handle</th>
                        </tr>
                    </thead>
                    <tbody id="addHere" class="addHere">

                    </tbody>
                    </table>


                    </table>

                </div>
            <a href="" title="Add to chart" class="ui-icon ui-icon-cart chart_but">Add to chart</a>

    <div style="display:none;">

    </div>

</li>

JQUERY

     //Modal window to ask and submit additional user details
        $(function () {
            var hShape = $("#hShape"),
                hSize = $("#hSize"),
                hType = $("#hType"),

        allFields = $([]).add(hShape).add(hSize).add(hType),
        tips = $(".validateTips");

            function updateTips(t) {
                tips
            .text(t)
            .addClass("ui-state-highlight");
                setTimeout(function () {
                    tips.removeClass("ui-state-highlight", 1500);
                }, 500);
            }


            function checkLength(o, n, min) {

                //check handle shape. Make sure the user only inputs relevent options
                if (n == "Handle Shape") {
                    if (o.val() != "Pro" && o.val() != "Oval" && o.val() != "Round") {
                        o.addClass("ui-state-error");
                        updateTips(n + " can only have values of 'Pro', 'Oval' and 'Round'  " + ".");
                        return false;
                    }
                }
                //check lenght 
                if (o.val().length < min) {
                    o.addClass("ui-state-error");
                    updateTips(n + " cannot be blank" + ".");
                    return false;
                } else {
                    return true;
                }
            }


            $("#dialog-form").dialog({
                autoOpen: false,
                height: 400,
                width: 400,
                modal: true,
                show: 'fade',
                hide: 'fade',
                buttons: {
                    "Add Details": function () {
                        var bValid = true;
                        allFields.removeClass("ui-state-error");

                        bValid = bValid && checkLength(hShape, "Handle Shape", 3);
                        bValid = bValid && checkLength(hSize, "Handle Size", 1);
                        bValid = bValid && checkLength(hType, "Handle Type", 3);


                        if (bValid) {
                           $('#addHere').each(function () {
                            $(this).append("<tr>" +
                                "<td>" + hShape.val() + "</td>" +
                                "<td>" + hSize.val() + "</td>" +
                                "<td>" + hType.val() + "</td>" +
                                "</tr>")
                       });
                            $(this).dialog("close");
                        }
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                },
                close: function () {
                    allFields.val("").removeClass("ui-state-error");
                }
            });

             $("#handle-pre").live("click", function () {

                $("#dialog-form").dialog("open");
            });
        });

特别是在我尝试更新相关表的代码中；

if (bValid) {
   $('#addHere').each(function () {
      $(this).append("<tr>" +
        "<td>" + hShape.val() + "</td>" +
        "<td>" + hSize.val() + "</td>" +
        "<td>" + hType.val() + "</td>" +
        "</tr>")
    });
 };

如果我的解释不够充分，请看看 fiddle 。 Here is the fiddle...

Answer 1

您通过 ID 选择元素，jQuery 的 id 选择器只会找到与给定 id 匹配的第一个元素。在您的情况下，您可以指定要查找元素的上下文

// find the main dialog element
var $el = $(this).closest('.ui-dialog');

if (bValid) {
     // set the context to the visible div in the background - which is a previous sibling to current dialog
    $('#addHere', $el.prevAll('.ui-dialog:visible')).append("<tr>" + "<td>" + hShape.val() + "</td>" + "<td>" + hSize.val() + "</td>" + "<td>" + hType.val() + "</td>" + "</tr>")
}

http://jsfiddle.net/4R9B6/

using $('#addHere', $el.prevAll('.ui-dialog:visible')) 正在设置查找 addHere 元素的上下文。检查 dom 后，是之前可见的 ui-dialog

此外，ID 应该是唯一的 - 因此使用类可能会更好，尽管使用类所需的解决方案是相同的。