0

私はこの設定をしています：

<div class="video" id="video_main">
        <div class="video_image_bg video_logo_off" id="video_bg">
            <span class="video_span" id="video_span"></span>
        </div>
<div>
<div class="video" id="video_main">
        <div class="video_image_bg video_logo_off" id="video_bg">
            <span class="video_span" id="video_span"></span>
        </div>
<div>
....
....

と：

var videospan = $('.video').find('#video_span');

$('.video').mouseenter(function() {
    videospan.fadeTo("slow", 1);
});
$('.video').mouseleave(function() {
    videospan.fadeTo("slow", 0);
});

1つの問題は、マウスを入力すると、実際にマウスで入力したdivではなく、すべてのdivが影響を受けることです。

ここで何$(this)を意味するのかわかりません

2番目の問題は、とよりも優れた方法hoverを使用したいのですが、同じ効果を得るためにどのように使用するかがわかりません。hoverIntentmouseentermouseleavefadeTo

何か案は？

ありがとう

4

3 に答える 3

4

クラスベースのソリューションを使用しようとしました。また、同じドキュメントに重複したIDがあります。IDは、同じドキュメント内で一意である必要があります。

var videospan = $('.video');

videospan.hover(
function() {
    $(this).find('.video_span').fadeTo("slow", 1);
},
function() {
    $(this).find('.video_span').fadeTo("slow", 1);
});

上記を試して、どうなるか教えてください。

于 2012-02-13T22:09:10.783 に答える
3

イベント内で使用thisして、誰がイベントを発生させたかを確認します。

$('.video').mouseenter(function() {
    $(this).find('.video_span').fadeTo("slow", 1);
});
$('.video').mouseleave(function() {
    $(this).find('.video_span').fadeTo("slow", 0);
});

同じIDvideo_spanを持つ複数の要素があることに注意してください。video_mainidは一意である必要があります！

各id値は、ドキュメント内で1回だけ使用する必要があります。複数の要素に同じIDが割り当てられている場合、そのIDを使用するクエリは、DOMで最初に一致した要素のみを選択します。ただし、この動作に依存するべきではありません。同じIDを使用する複数の要素を持つドキュメントは無効です。

jqueryのドキュメントから。

各ページは国であり、各IDは... IDです。同じ国に、同じIDを持つ複数の人を含めることはできません。

于 2012-02-13T22:06:10.693 に答える
1

問題＃1：複数の要素に同じIDが設定されています。IDは、設定する要素に固有である必要があります。このためにクラスを使用する必要があります。

問題＃2：クラスのすべての要素var videospan = $('.video').find('#video_span');の下にIDを持つ要素を検索するように指示します。video_spanvideo

コードを使用する正しい方法は次のとおりです。

<div class="video video_main">
        <div class="video_image_bg video_logo_off video_bg">
            <span class="video_span"></span>
        </div>
<div>
<div class="video video_main">
        <div class="video_image_bg video_logo_off video_bg">
            <span class="video_span"></span>
        </div>
<div>

。

$('.video').mouseenter(function() {
    var videospan = $(this).find('.video_span');
    videospan.fadeTo("slow", 1);
});
$('.video').mouseleave(function() {
    var videospan = $(this).find('.video_span');
    videospan.fadeTo("slow", 0);
});

イベントがjQueryに呼び出されると、のコンテキストは、イベントがトリガーされた要素のにthisなります。HTMLDOMElemnentしたがって、イベント内では、、this.style.displayなどthis.appendChild()が機能します。ただし、jQueryオブジェクトではないため、jQueryはを受け入れることができるため、thisを使用してjQueryチェーンと関数を有効にします。$(this)HTMLDOMElement

あなたが何か新しいことを学んだ場合は投票し、これがあなたの答えである場合は受け入れてください。

于 2012-02-13T22:18:23.927 に答える