jQuery hoverIntent - 関数を分割すると何が間違っていますか？ - jquery

hoverintentのための関数を分割し、それがうまくいきましたが、現在、divはマウスが残るまで隠れていませんか？

私はこれを書いています。これはうまくいきます。私はおそらくあなたが言うことができるように、jqueryを初めて使っています。

$("img.nexthover").hover(
function() { this.src = this.src.replace("_off", "_on");
},
function() { this.src = this.src.replace("_on", "_off");
});
$("#A,#B,#C,#D,#E,#F,#G,#H,#I,#J").addClass("nextHide");
$(".nextbuttonA").hover(function() {
$("#A.nextHide").fadeIn("slow");
$("#B,#C,#D,#E,#F,#G,#H,#I,#J.nextHide").fadeOut();
});
$(".nextbuttonB").hover(function() {
$("#B.nextHide").fadeIn("slow");
$("#A,#C,#D,#E,#F,#G,#H,#I,#J.nextHide").fadeOut();
});
$(".nextbuttonC").hover(function() {
$("#C.nextHide").fadeIn("slow");
$("#A,#B,#D,#E,#F,#G,#H,#I,#J.nextHide").fadeOut();
});
$(".nextbuttonD").hover(function() {
$("#D.nextHide").fadeIn("slow");
$("#A,#B,#C,#E,#F,#G,#H,#I,#J.nextHide").fadeOut();
});
$(".nextbuttonE").hover(function() {
$("#E.nextHide").fadeIn("slow");
$("#A,#B,#C,#D,#F,#G,#H,#I,#J.nextHide").fadeOut();
});
$(".nextbuttonF").hover(function() {
$("#F.nextHide").fadeIn("slow");
$("#A,#B,#C,#D,#E,#G,#H,#I,#J.nextHide").fadeOut();
});
$(".nextbuttonG").hover(function() {
$("#G.nextHide").fadeIn("slow");
$("#A,#B,#C,#D,#E,#F,#H,#I,#J.nextHide").fadeOut();
});
$(".nextbuttonH").hover(function() {
$("#H.nextHide").fadeIn("slow");
$("#A,#B,#C,#D,#E,#F,#G,#I,#J.nextHide").fadeOut();
});
$(".nextbuttonJ").hover(function() {
$("#I.nextHide").fadeIn("slow");
$("#A,#B,#C,#D,#E,#F,#G,#H,#J.nextHide").fadeOut();
});
$(".nextbuttonK").hover(function() {
$("#J.nextHide").fadeIn("slow");
$("#A,#B,#C,#D,#E,#F,#G,#H,#I.nextHide").fadeOut();
});
$("#A,#B,#C,#D,#E,#F,#G,#H,#I,#J").click(function(){
$(".nextHide").fadeOut();
});

hoverIntentを動作させるには、次のように関数を分割します。

$("img.nexthover").hover(
function() { this.src = this.src.replace("_off", "_on");
},
function() { this.src = this.src.replace("_on", "_off");
});
$("#A,#B,#C,#D,#E,#F,#G,#H,#I,#J").addClass("nextHide");

$(".nextbuttonA").hoverIntent(function() {
$("#A.nextHide").fadeIn("slow");
}, function() {
$("#B,#C,#D,#E,#F,#G,#H,#I,#J.nextHide").fadeOut();
});

$(".nextbuttonB").hoverIntent(function() {
$("#B.nextHide").fadeIn("slow");
}, function() {
$("#A,#C,#D,#E,#F,#G,#H,#I,#J.nextHide").fadeOut();
});

---etc----

しかし、あなたが前のようにボタンを離れるまで、divは隠れていませんか？ もしこれがあまりにも初心者であれば申し訳ありません、私はジャンプして自分自身を教えています...

回答：

興味があれば、jQueryの構文はおそらくもっと良いかもしれませんが、私は別のプログラムで作業しているので、HTMLの入力方法に制限があります

$("img.nexthover").hover(
function() { this.src = this.src.replace("_off", "_on");
},
function() { this.src = this.src.replace("_on", "_off");
});
$("#A,#B,#C,#D,#E,#F,#G,#H,#I,#J").addClass("nextHide");

$(".nextbuttonA").hoverIntent(function() {
$("#A").fadeIn("slow");$("#B,#C,#D,#E,#F,#G,#H,#I,#J").fadeOut();
}, function() {
$("#B,#C,#D,#E,#F,#G,#H,#I,#J").hide();
});

$(".nextbuttonB").hoverIntent(function() {
$("#B").fadeIn("slow");$("#A,#C,#D,#E,#F,#G,#H,#I,#J").fadeOut();
}, function() {
$("#A,#C,#D,#E,#F,#G,#H,#I,#J").hide();
});

-------etc----------

つまり、ボタンに画像を追加するだけですマウスオーバーでは、それらにhoverintentを使用して、絶対配置された要素を持つディビジョンを開きます。 nextHideのCSSはdisplay：none; cursor：pointer; A、Bという名前のHTML div ... 私はこのjQueryのものが大好きです。

おかげでelclarenrs、素晴らしいリンク。