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

【问题标题】：jquery, how to affect only the clicked element?jquery，如何只影响被点击的元素？
【发布时间】：2012-02-14 06:18:23
【问题描述】：

我有这个设置：

<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 来获得相同的效果。

有什么想法吗？

谢谢

【问题讨论】：

标签： jquery mouseenter mouseleave hoverintent fadeto

【解决方案1】：

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

var videospan = $('.video');

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

试试上面的方法，让我知道结果如何。

【讨论】：

【解决方案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 的人。

【讨论】：

@Patrioticcow。不要忘记修复 id 的东西。它会导致很多问题。
并且 id video_bg 和 video_span 也重复。 1999 年的规范和人们仍然会弄错。

【解决方案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。

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

【讨论】：