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

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都会受到影响，而不是我用鼠标实际输入的div。

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

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

有什么想法吗？

感谢

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文档。

每个页面都是一个国家，每个id都是…id，在同一个国家不可能有几个人拥有相同的id。

Answer 3

问题#1：您为多个元素设置了相同的ID。ID对于要设置它的元素应该是唯一的。您应该为此使用类。

问题2:var videospan = $('.video').find('#video_span');告诉它在video类的所有元素下查找ID为video_span的元素。

以下是使用代码的正确方法：

<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。

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