jquery, как повлиять только на нажатый элемент? - PullRequest
Новая
       35

jquery, как повлиять только на нажатый элемент?

0 голосов
/ 14 февраля 2012

У меня есть эта настройка: 

<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);
});

Одна проблема заключается в том, что когда я вводлю мышью, это затрагивает все div, а не тот, который я на самом деле ввел мышью.

я не уверен, что означает $(this)

и вторая проблема в том, что я хочу использовать hover или hoverIntent метод лучше, чем mouseenter и mouseleave, но я не уверен, как использовать fadeTo для получения того же эффекта.

есть идеи?

Спасибо

Ответы [ 3 ]

4 голосов
/ 14 февраля 2012

Я пытался использовать решение на основе классов, также у вас есть дубликат идентификатора в том же документе.Идентификаторы должны быть уникальными в том же документе. 

var videospan = $('.video');

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

Попробуйте выше и дайте мне знать, как это происходит.

3 голосов
/ 14 февраля 2012

используйте this внутри события, чтобы узнать, кто вызвал событие. 

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

Обратите внимание, что у вас есть несколько элементов с одинаковыми идентификаторами video_span и video_main. идентификатор должен быть уникальным !

Каждое значение идентификатора должно использоваться только один раз в документе. Если более чем одному элементу был присвоен один и тот же идентификатор, запросы, использующие этот идентификатор, будут выбирать только первый соответствующий элемент в DOM. Однако на такое поведение нельзя полагаться; недопустимый документ с более чем одним элементом, использующим один и тот же идентификатор.

Из справки Документы .

каждая страница - это страна, и каждый идентификатор ... идентификатор, в одной и той же стране не может быть нескольких человек с одним и тем же идентификатором.

1 голос
/ 14 февраля 2012

Проблема № 1: у вас установлен одинаковый идентификатор для нескольких элементов.Идентификаторы должны быть уникальными для элемента, для которого вы его устанавливаете.Для этого вы должны использовать классы.

Проблема №2: var videospan = $('.video').find('#video_span'); говорит ему найти элемент с идентификатором video_span для всех элементов с классом video.

правильный способ использования вашего кода: 

<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() и т. Д.Однако this не является объектом jQuery, поэтому мы включаем jQuery-цепочку и функции, используя $(this), поскольку jQuery может принять HTMLDOMElement.

.

...