jquery show / hide

Question

我对JavaScript或jQuery不太满意，但是当我将鼠标悬停在<div>元素上时，我正试图显示一个图像。问题是它也与其他的一起发生。

$(document).ready(function () {

    $("#event .event").hover(function () {
        $(".event img").show("slow");
    },
    $(".event img").mouseout(function () {
        $(".event img").hide("slow");
    }));

});

Html代码：

<div id="event">
    <div class="event">
         <h4>name1</h4>

        <p>some text1</p>
        <img style='position:relative; display:none;' src='img1' alt='' />
    </div>
    <div class="event">
         <h4>name2</h4>

        <p>some text2</p>
        <img style='position:relative; display:none;' src='img2' alt='' />
    </div>
</div>

但是如果我有五个，那么两个图像都会出现，或者全部是五个......有些帮助吗？

Answer 1

$函数的第二个参数通常用于定义上下文。意思是，您的选择器将相对于特定元素或选择器使用。

$(".event") // finds all .event elements
$(".event", this) // finds all .event elements within 'this'

考虑到这一点，我们可以修改您的代码，以便在当前输入或存在的.event元素中查找以找到合适的图像：

​$("#event .event").on({
    mouseenter: function(){
        $("img", this).show();
    },
    mouseleave: function(){
        $("img", this).hide();
    }
});​​​

这会将某些逻辑绑定到与#event .event选择器匹配的每个元素。其中每个都有一个绑定到mouseenter和mouseleave事件的处理程序。只要您悬停其中一个与选择器匹配的元素，我们就会使用this关键字引用该特定元素。

如果您在页面上输入第一个#event .event元素，this会引用该元素。同样，如果退出该元素，this将引用该元素退出。回顾这一回复的第一点，这意味着$("img", this)将定位元素中的每个图像，从而引发mouseenter或mouseleave事件。

另外，请仔细检查您对.hover()的使用情况;此方法采用两个参数，即函数，分别在mouseenter和mouseleave时调用：

$("#event .event").hover( showImages, hideImages );

function showImages () {
    $("img", this).show();
}

function hideImages () {
    $("img", this).hide();
}

或者您可以将这些直接放在.hover方法中作为匿名函数：

$("#event .event").hover(
    function(){ $("img", this).show(); }, 
    function(){ $("img", this).hide(); }
);

Answer 2

您正在隐藏并显示所有图片，您需要使用this关键字仅定位当前元素，而不是所有图片，这是使用切换的另一个更简单的解决方案：

$(document).ready(function(){
    $("#event .event").on('mouseenter mouseleave', function() {
            $('img', this).toggle(e.type=='mouseenter');
    });
});

Answer 3

试试这个。 IMO这个解决方案更容易理解。

$(document).ready(function () {
    $("#event .event").hover(function () {
        $(this).find('img').show();
    }, function(){
       $(this).find('img').hide();
    });
});