jQuery 新手，但对它非常着迷并且非常喜欢它。但是，这个问题开始让我失望。非常感谢任何帮助。上周花了很多时间试图从中做出正面或反面。如果此问题之前已发布，我深表歉意。
我有一个产品清单。每个产品都包含在一个<div>. <span>每个 div 内部都有一个用于产品信息的浮动对象和一个<a>用于访问产品的相应 URL。此列表是使用 ASP.NET 以编程方式生成的。
<div id="prod1">
<span id="infoProd1" class="prodInfo" />
<a class="prodURL" href="url1">Name of product #1</a>
</div>
:
:
不幸的是，我没有 URL，因为这只是在防火墙后面的开发平台中。该站点与下面的站点非常相似。我希望这有帮助。
+----------+------------------------------+
| #prod1 | |
+----------+ | Each #prodNum div looks like:
| #prod2 | overlay and frame divs |
+----------+ appear over here | +-- #prod1 -----------------+
| #prod3 | with product details | | | |
+----------+ only if .prodInfo | | .prodURL | .prodInfo |
| | is clicked. | | | |
| : | | +---------------------------+
| | |
+----------+------------------------------+
每个产品的信息（包括照片）都存储在数据库中。
根据用户在跨度（即 prodInfo）上的操作，所需的过程是：
- 悬停将显示一个带有一些产品信息和一些详细信息（例如价格）的小弹出窗口。
- 点击将显示（动画）一个半透明的叠加层和一个 <div id="frame"> 包含有关产品的所有信息，包括照片。
我在框架内有一个图像，单击该图像会隐藏覆盖/框架。
使用 jQuery Ajax 提取信息（包括照片）$.get()。
使用 jQuery，我能够在第一遍（第一次点击）中实现这一点。但是，在我关闭“框架”并隐藏叠加层，然后将鼠标悬停在任何“prodInfo”上之后，它会显示应有的小弹出窗口，但同时也会显示叠加层和“框架”，就好像我一样调用click。
这是两个事件的简化 jQuery 代码：
$(".prodInfo").mouseover(
function(e) { // function fired when 'moused over'
var popupItem = $("#div_infoPopupItem"); // absolute positioned popup
var prod = $(this).attr('id');
var prd;
popupInit(popupItem, e); // changes the top/left coords
$.ajax({
type : 'GET',
url : 'prodInfo.aspx',
data : 'id=' + prod,
success :
function(prodInfo, status) {
var prodStr = '<b>No product name.</b>';
prd = prodInfo.split('::'); // product info delimited by '::'
prodStr = '<div class="popupInfo_head">' + prd[0] + '</div>' +
'<div style="margin:2px;">' + prd[1] + '</div>';
// and so on...
popupItem.html(prodStr);
return false;
},
error :
function() {
popupItem.html('Error in collecting information.');
}
});
popupItem.animate({ opacity : .94 }, { queue:false, duration: 120 });
return false;
}
);
$(".prodInfo").click(
function(e) {
var prod = $(this).attr('id');
var frame = $("#div_frame");
var overlay = $("#div_overlay");
var info;
var img = new Image();
document.getElementById('div_frame').scrollTop = 0;
$.get('prodInfo.aspx', { id: prod },
function (result) {
info = result.split(';;'); // name ;; status ;; description ;; price, etc.
$(this).ajaxSuccess(
function (e, request, settings) {
img.src = 'prodImage.aspx?id=' + prod;
img.id = 'prodImg';
//populate the frame with prod info
$(img).load(function () {
$("#prodInfoImage")
.css('background', 'transparent url("prodImage.aspx?id=' + prod + '") no-repeat 50% 50%');
switch (info[1]) {
case '0':
$("#prodStatus")
.removeAttr("class")
.addClass("status_notavail")
.text('Not available');
break;
case '1':
$("#prodStatus")
.removeAttr("class")
.addClass("status_avail")
.text('Available');
break;
} // switch
$("#prodInfoDesc")
.empty()
.append(info[2]);
$("#prodInfoExtra")
.empty()
.append(info[3]);
$("#prodName").text(info[0]);
}
)
.error(
function() {
return false;
}
); // image load
// animate overlay, frame and display product info
overlay .animate({ top : '0' }, { queue: false, duration: 280 })
.animate({ height: '100%' }, 280, '',
function() {
frame.animate({ opacity : .92 }, 320);
return false;
}
);
return false;
}
); // ajax success
}
); // get
}
);
下面是位于框架内的“关闭”图像的事件定义。
$("#img_close").click(
function (e) {
$("#div_frame")
.animate({ opacity: 0}, 100, '',
function() {
$("#div_overlay")
.animate({ top : "50%" }, { queue: false, duration: 120 })
.animate({ height: "0px" }, 120);
}
);
return false;
}
);
如前所述，这只会在第一次点击之前按计划工作。在我单击prodInfo span并关闭框架/覆盖后，prodInfo上的下一个鼠标悬停实际上会调用鼠标悬停和单击（显示覆盖/框架）。
编辑：感谢所有回复的人。我将尝试使用您的每个建议对其进行调试。
编辑（2）： Mahalo给所有评论和回复的人。