jQuery mouseoverを呼び出すをクリック
https://stackoverflow.com/questions/715170
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
新しいjQueryが非常に魅せられて本当に愛してくれてありがとう！に転じてくれても、この問題です。いと思わります。過去週間のう表裏ったことと思います。会員の方はログインしてくだ問題が解決しない場合に掲載されています。
いリスト製品となります。各製品に同封され、 <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)において、求められる過程:
- ホバー 表示す小さなポップアップの一部の製品情報や詳細などしています。
- クリック まショー(アニメーション)の半透明のオーバーレイ、 <div id="frame"> すべてを含むに関する情報は、製品を含むの写真です。
いというイメージの枠内にクリックすると、hideのオーバーレイ/フレーム。
情報(クラシックモデルを含む)を引用jQueryのAjax $.get().
JQueryを使うことに関するパラメータを含むの クリック).しかし、まっすり"フレームを非表示にするオーバーレイ、そして ホバー る"prodInfo"と思表示のポップアップサイズを変更する機能を提供できも同時に表示させるオーバーレイを"フレーム"べているような気分になりました呼び出される クリック.
ここでは、簡易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 近くにはフレーム／オーバーレイ、次のmouseoverに prodInfo 実際にソッドを呼び出しの両方mouseoverもクリックを示すものオーバーレイ/フレーム）。
編集：下さった皆様、ありがとうござ回答がありました。えは問題なかったと思います。デバッグを使い分けてそれぞれの提案である。
編集(2):ロ 皆様とと対応しています。※
解決
私は非常にあなたが持っている全体のセットアップを想像することはできませんが、これは心にポップ最初のものでした。これは、閉じるボタンとスパンの両方にクリックイベントを運ぶ、イベントバブリングの場合であるかもしれません。あなたがクローズイベントをクリックすると、おそらく、スパンクリックしても発火かもしれませんが、フレームはクローズイベントによって隠されています。デフォルトのアクションとイベントバブリングを停止に関する詳しい情報は、バインド機能をチェックアウト：ます。http：// jqueryの.bassistance.de / API-ブラウザ/＃bindStringObjectFunctionする
ドンが述べたように、サンプルのURLは間違いなく大いに役立つだろう！
編集ます：
さらに検査時には、私はそれはあなたがクリック（）イベント内ajaxSuccessイベントを装着している方法だと思います。 ANY AJAXリクエストが行われるたびにそれはまだアクティブで焼成かもしれません。
編集、再びます：
私は、コードの私自身のテストでこれを確認したのだが、間違いなく問題になるようです。あなたは5回をクリックした場合、それはその関数を5回実行して実際には、それは、ajaxSuccess機能あなたがクリックするたびに取り付けています。 AJAXリクエストがmouseoverイベントで構成されているので、それはまた、以前に添付ajaxSuccess機能を発射し、あなたのオーバーレイとフレームを見せてます。
この問題を回避するにしてみてください次：
の代わりに：
$.get('prodInfo.aspx', { id: prod },
function (result) {
info = result.split(';;'); // name ;; status ;; description ;; price, etc.
$(this).ajaxSuccess(
試します：
$.get('prodInfo.aspx', { id: prod },
function (result, statusText) {
info = result.split(';;'); // name ;; status ;; description ;; price, etc.
if ( statusText == 'success' ) {
他のヒント
私はパントを取るつもり、との問題はあなたがクリック/最初のマウスオーバーでポップアップを表示して、ちょうどそれが不透明レンダリング/生成することであると言うんです。古いdiv要素が逮捕し、再び見えるようにされているように第二マウスオーバーで、それが見えます。
あなたはこの問題を持っているページへのリンクURLを提供することができれば、それ以外は、私はより深く見てみることができます。
問題は、あなたがマウスオーバーを行うときにクリック時に作成されたものを隠していないことかもしれません。あなたは再びマウスオーバー時にそう、あなたは最初を示しているが、最初は今それにclickイベントアイテムを持っているので、それは同様にそれを示しています。あなたは、マウスオーバーのクリックイベントの項目を非表示にしたいと思うので、それは同様に表示されません。
