無法更新每個所選產品與jQuery UI

Question

背景

在我當前的項目，我已經實現產品和使用JQuery UI一個購物籃。這是我第一次嘗試實現JQuery UI，但我足夠用JQuery API。這家商店將用.Net使用C＃驅動。我在開發過程中碰到過這個問題，我已經搜索了網絡的每個角落，並翻開了JQuery API的每一頁。我只是無法弄清楚代碼中的邏輯有什麼問題。

我的問題

有些產品有哪些需要之前發送到購物籃來選擇其他選項。所以我實現了一個對話框來獲取用戶需要的信息（JQuery Dialod Modal）並更新每個產品中的表格。程序中的所有內容都可以工作，直到用戶輸入更新相關產品時爲止。每次更新產品時，只有第一個產品才能獲得詳細信息。我希望我已經爲你們清楚地解釋了我的問題......我還在下面加入了一個基本的小提琴模擬相同的問題。我

如果你點擊信息圖標，點擊添加句柄首選項，並填寫信息比再次檢查第一個產品，你會明白我的意思。一切只能打印到第一個產品中。必須有一種方法來寫入每個產品。

產品使用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>") 
    }); 
}; 

如果我的解釋不夠充分，請看看小提琴。 Here is the fiddle...

Answer 1

您正在通過ID選擇元素，而jQuery的id選擇器只會找到與給定id相匹配的第一個元素。你的情況，你可以指定的範圍內尋找使用$('#addHere', $el.prevAll('.ui-dialog:visible'))是設置在其中找到了addHere的元素的上下文元素

// 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/

。在檢查dom之後，以前可見的用戶對話框是

還有ID的應該是唯一的 - 所以使用類可能會更好，但如果使用類，它將是相同的解決方案。