Новичок в jQuery, но очень увлечен им и действительно любит его. Начинаю меня выключать, правда, с этой проблемой. Буду очень признателен за любую помощь. Потратил последнюю неделю, пытаясь сделать из этого головы или хвосты. Я прошу прощения, если эта проблема была опубликована ранее.
У меня есть список товаров. Каждый продукт заключен в <div>. Внутри каждого div есть всплывающее <span> для информации о продукте и <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 ), желаемым процессом будет:
У меня есть изображение внутри рамки, которое при щелчке скрывает оверлей / рамку.
Информация (включая фотографию) извлекается с помощью jQuery Ajax $.get().
Используя jQuery, я смог добиться этого на первом проходе (первый click ). Однако после того, как я закрою «frame» и скрою оверлей, а затем hover над любым «prodInfo», он отобразит маленькое всплывающее окно, как и должно быть, но в то же время ТАКЖЕ ОТКРЫВАЕТ оверлей и "frame", как будто я вызвал 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 фактически вызывает ОБА мыши и ТАКЖЕ щелчок (который показывает наложение / фрейм ).
EDIT:
Спасибо всем, кто откликнулся. Я постараюсь отладить его, используя каждое из ваших предложений.
EDIT (2):
Махало для всех, кто прокомментировал и ответил.