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

一个问题是，当我用鼠标输入时，所有 div 都会受到影响，而不是我用鼠标实际输入的那个。

我不确定$(this)这里是什么意思

第二个问题是我想使用hoverorhoverIntent比mouseenterand更好的方法mouseleave，但我不确定如何使用fadeTo来获得相同的效果。

有任何想法吗？

谢谢

4

3 回答 3

4

I tried to use class based solution, Also you have duplicate ID in same document. ID's must be unique in the same document.

var videospan = $('.video');

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

Try above and let me know how it goes.

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

请注意，您有多个具有相同video_span和video_mainid 的元素。id 必须是唯一的！

每个 id 值只能在文档中使用一次。如果为多个元素分配了相同的 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()之类的东西会起作用。然而this它不是一个 jQuery 对象，所以我们使用 jQuery 链接和函数$(this)，因为 jQuery 可以接受一个HTMLDOMElement.

如果您学到了新东西，请投票，如果这回答了您的问题，请接受。

于 2012-02-13T22:18:23.927 回答