背景：
在将产品添加到结帐图表之前，我需要触发一个具有自定义选项的模态窗口。只有在此事件发生后，才能将该项目添加到图表中。如果我使用其他语言（c＃），我可以实现此功能，但我想学习更多JQuery和JQuery UI。
问题：
我已尝试过各种方法来分配带有数据的容器，但到目前为止我的所有方法都失败了。所以我稍微简化了程序，因为HTML方面大约有2000行代码，我不喜欢给你们这些人。请忽略任何愚蠢的错误，例如额外的标记标记和缺少结束标记，因为我试图从原始来源缩短问题并且可能遗漏了一些东西。
部分HTML：
<html>
<head></head>
<body>
<div class="ui-widget ui-helper-clearfix" style="height:100%; float:left !important; border:2px solid Black;">
<center>
<div class="optionsHeader" style="">RECOMMENDED VALUE PACKAGES</div></center><br />
<ul id="options" class="options ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr" id="100400" title="Please view product details for handle preferences before sellecting this option.">
<h5 class="ui-widget-header">Option 1</h5>
<font class="repairDetails" alt="Repair Details" style="">REHANDLE<br />FULL BLADE/TOE<br />REPAIR/REFURB</font>
<font style="color:Red; text-decoration:blink; font-size:0.7em; bottom:10;">Please view product details for <u>handle preferences</u> before sellecting this option.
</font><br />
<label class="price">£49.99</label>
<a class="ui-icon ui-icon-wrench dialog_but" title="View Product Detail" href="#" style="">View Product Detail</a>
<div class="dialog_content" title="" style="">
<div id="products">
<h1 class="ui-widget-header">Avaliable Bundle Options</h1>
<font>You can customise this option below</font>
<div id="pOptions">
<h2><a href="#">Handle</a></h2>
<div>
<ul>
</ul>
</div>
<h2><a href="#">Blade</a></h2>
<div>
<ul>
</ul>
</div>
<h2><a href="#">Grips</a></h2>
<div>
<ul>
</ul>
</div>
</div>
</div>
<div id="cart">
<h1 class="ui-widget-header">Sellected Options</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder"><i>Drag & Drop</i> your bat repair here</li>
</ol>
</div>
</div>
</div>
<a href="" title="Add to chart" class="ui-icon ui-icon-cart chart_but">Add to chart</a>
</li>
</ul>
</div>
<div id="chart" class="ui-widget-content ui-state-default">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-cart"></span>Repair Options You Have Chosen</h4>
</div>
</body>
</html>
部分JQuery：
$(function() {
// there's the options and the chart
var $options = $("#options"),
$chart = $("#chart");
//Add to chart
var recycle_icon = "<a href='' title='Remove this option' class='ui-icon ui-icon-arrowreturnthick-1-w'>Remove Option</a>";
function addToChart($item) {
// He is where i need to prompt the modal than continue as below;
$item.fadeOut(function() {
var $list = $("ul", $chart).length ? $("ul", $chart) : $("<ul class='options <ui-helper-> </ui-helper->reset'/>").appendTo($chart);
$item.find("a.ui-icon-cart").remove();
$item.append(recycle_icon).appendTo($list).fadeIn(function() {
$item.animate({
width: "100%px",
height: "100%px"
}) //Box
.find("font").animate({}); //Font
});
});
}
// revert frm chart function
var chart_icon = "<a href='' title='Add this option' class='ui-icon ui-icon-cart'>Add Option</a>";
function revertFrmChart($item) {
$item.fadeOut(function() {
$item.find("a.ui-icon-arrowreturnthick-1-w").remove().end().css("width", "100%px").append(chart_icon).find("font").css("height", "100%px").end().appendTo($options).fadeIn();
});
}
// resolve the icons behavior with event delegation
$("ul.options > li").click(function(event) {
var $item = $(this),
$target = $(event.target);
if ($target.is("a.ui-icon-cart")) {
addToChart($item);
} else if ($target.is("a.ui-icon-arrowreturnthick-1-w")) {
revertFrmChart($item);
}
return false;
});
});
//do when the dom is ready
jQuery(document).ready(function($) {
//loop through every button anchor element
$('.dialog_but').each(function() {
//create a local scope of a dialog variable to attach
var $dialog;
//create the dialog for the div.dialog_content standing next to the anchor element
//I set the autoOpen false so that it can be reusable later
//also I set the modal = true to appear the dialog as a modal prompt
$dialog = $(this).next('div.dialog_content').dialog({
title: 'Product Detail',
modal: true,
autoOpen: false,
width: 600,
show: 'fade',
hide: 'fade'
});
//Swapped this with the inline version
//add a wee bit of button thing
// $(this).button({
// icons: {
// primary: 'ui-icon-info'
// }
// });
//now attach the open event of the dialog to the anchor element
$(this).click(function(e) {
//prevent the anchor element to go to the hyperlinked page
e.preventDefault();
//open the dialog
$dialog.dialog('open');
}); //done
});
});
//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");
$("#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);
// find relevant parent element
var $el = $(this).closest('.ui-dialog');
if (bValid) {
// set the context to the visible div in the background -
$('#addHere', $el.prevAll('.ui-dialog:visible')).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");
});
});
JSFiddle：
如果单击扳手图标，系统将提示您使用模态。当用户点击添加到图表时，这是我需要触发的模态。
答案 0 :(得分：0)
我认为令人困惑的一点是为每个产品精确定位每个模态数据div。所以给每个模态数据div一个唯一的ID，并在添加到图表时我添加了一个switch语句来激发正确的模态。
因此，模态数据现在具有ID的HTML;
<div id="op1Dialog" class="dialog_content" title="" style="">
添加聊天现在有以下内容;
function addToChart($item) {
var currentId = $item.attr('id');
switch(currentId) {
case "100400": $('#op1Dialog').dialog('open'); break;
case "100401": $('#op2Dialog').dialog('open'); break;
and so on...
}
Rest of the function obove..............
（编辑）FIDDLE LINK
让我知道是否有人能想到比使用switch语句更好的方法......