Question

我有这个设置：

<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，但我不确定如何使用{{1}获得同样的效果。

任何想法？

由于

Answer 1

我尝试使用基于类的解决方案，同样在同一文档中有重复的ID。 ID必须在同一文档中是唯一的。

var videospan = $('.video');

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

尝试以上内容，让我知道它是怎么回事。

Answer 2

在活动中使用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 ID的元素。 ID必须唯一！

每个id值只能在文档中使用一次。如果为多个元素分配了相同的ID，则使用该ID的查询将仅选择DOM中的第一个匹配元素。但是，不应依赖此行为;使用相同ID的多个元素的文档无效。

来自jquery docs。

每个页面都是一个国家/地区，每个ID都是... id，您不能在同一个国家/地区拥有多个具有相同ID的人。

Answer 3

问题＃1：您为多个元素设置了相同的ID。 ID应该是您为其设置的元素所独有的。你应该使用这个类。

问题＃2：var videospan = $('.video').find('#video_span');告诉它在video_span类的所有元素下找到ID为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对象，因此我们使用$(this)启用jQuery链接和函数，因为jQuery可以接受HTMLDOMElement。

如果你学到了新的东西，请投票，如果这回答了你的话，请接受。

jquery，如何只影响被点击的元素？

3 个答案: