jQuery hide & show - 在我点击它之前，覆盖图像“运行”了

Question

我不确定这是一个 jQuery 错误还是我做错了什么，但这里有。 我有一个带有缩略图的 IMG 元素，我希望只有当鼠标悬停在缩略图上时才会显示可点击的放大镜图标（另一个 IMG）。 这工作正常，直到我将鼠标移到单击图标上。图标像疯了似的跳进跳出。

<link href="Scripts/picpop.css" rel="stylesheet" />
<script src="Scripts/picpop.js"></script>
<div class="bigDiv">
    <img src="images/products/prodmedium/TC-Chelsea-Mushroom2.jpg" alt="" class="smImg">
    <img src="Images/magglass.gif" alt="" class="zImg" data-large-src="images/products/prodlarge/TC-Chelsea-Mushroom2.jpg"  title="Click Here To Zoom"/>
</div>
<br />
<br />
<div class="bigDiv">
    <img src="images/products/prodmedium/TL-AdornCB-Fustic.jpg" alt="" class="smImg">
    <img src="Images/magglass.gif" alt="" class="zImg" data-large-src="images/products/prodlarge/TL-AdornCB-Fustic.jpg" title="Click Here To Zoom" />
</div>
... and so forth ...

jQuery/javascript:

$(document).ready(function () {

$(".zImg").click(function () {
    var parentDIV = $(this).parent(); //get the parent container (DIV) for this specific moused-over element
    var bigImg = parentDIV.children(".bigImg"); //now get the child IMG element from the parentDIV (for the large image) that will be or is already created

    // if the large image IMG element does not already exist, create it
    if ($(bigImg).length == 0) {
        var bigImagePath = $(this).attr("data-large-src");
        var newImgElem = $("<img />");
        newImgElem.attr({ "src": bigImagePath, "class": "bigImg", "title": "Click On Image To Close", "onclick": "clearimgsrc(this)" }); //add the attributes and an onclick event 
        newImgElem.appendTo(parentDIV);
    }
});
// strange - the following just goes nuts
$('.smImg').hover(function () {
    var parentDIV = $(this).parent();
    var zImg = parentDIV.children(".zImg");
    $(zImg).show('fast');
}, function () {
    var parentDIV = $(this).parent();
    var zImg = parentDIV.children(".zImg");
    $(zImg).hide('slow');
});

});


function clearimgsrc(elem) {
    $(elem).remove();  // get rid of the IMG tag completely
};

CSS：

.smImg
{
    width: 220px;
    height: 220px;
}

.bigImg
{
    width: 480px;
    height: 480px;
    cursor: pointer;
    cursor: zoom-out;
    position: absolute;
    margin-left: -350px;
    margin-top: -130px;
    z-index: 200;
}

.zImg
{
    width: 28px;
    height: 44px;
    cursor: pointer;
    cursor: zoom-in;
    z-index: 100;
    position: fixed;
    margin-left: -28px;
    margin-top: 176px;
    display: none;
}

更改延迟时间没有效果，但看起来是因为图标的 z-index 在缩略图前面，这会触发底层缩略图 IMG 的 mouseout 事件。有什么方法可以使这项工作在您将鼠标从缩略图上移开时图标消失，但看起来足够长以单击它？

这里有 2 个示例链接 - test2 没有悬停，test1 没有悬停（疯狂的）

Test2.htm

Test1.htm

Answer 1

经过长时间的调试得到了这个区域

看到您正在使用带有 mousein 和 mouseout 功能的 $(.smImg) 悬停事件

您正在使用 zImg 类在图像顶部添加另一个图像。

现在，当您进行 zImg 悬停时，会调用 smImg 的悬停事件，因此 zImg 会反弹并关闭。

这个问题的解决方法是你两个都不要用

   $('.smImg').hover 

smImg 事件而不是它使用父 div 悬停事件

  $('.bigDiv').hover 

并根据它更改您的代码

希望这有助于追踪逻辑错误

Answer 2

您可以使用.find() 代替.children()：

var parentDIV = ""; //<---decalare vars here
var zImg = "";      // <---and here

$('.smImg').hover(function () {
   parentDIV = $(this).parent();
   zImg = parentDIV.find(".zImg");
   zImg.show('fast');
}, function () {
   zImg.hide('slow');
});

我认为是$(zImg)，你不应该把它包装成一个jQuery对象，它已经是一个jQuery对象，所以像这样使用zImg.show。

还有这个：

bigImg.length

在点击函数中。

---

所以你可以这样使用最终代码：

$(document).ready(function () {
   var parentDIV = ""; //<---decalare vars here
   var zImg = "";      // <---and here
   $(".zImg").click(function () {
     parentDIV = $(this).parent();
     var bigImg = parentDIV.find(".bigImg");

     // if the large image IMG element does not already exist, create it
     if (bigImg.length == 0) {
        var bigImagePath = $(this).attr("data-large-src");
        var newImgElem = $("<img />");
        newImgElem.attr({ "src": bigImagePath, "class": "bigImg", "title": "Click On Image To Close", "onclick": "clearimgsrc(this)" }); 
        newImgElem.appendTo(parentDIV);
     }
   });

   $('.smImg').hover(function () {
       parentDIV = $(this).parent();
       zImg = parentDIV.find(".zImg");
       zImg.show('fast');
   }, function () {
       parentDIV = $(this).parent();
       zImg = parentDIV.find(".zImg");
       zImg.hide('slow');
   });

});


function clearimgsrc(elem) {
    $(elem).remove();  // get rid of the IMG tag completely
};

Answer 3

这是一个可行的最终解决方案（适用于需要它的人）。

Javascript：

$(document).ready(function () {
    var parentDIV = "";
    var zImg = "";  
    $(".zImg").click(function () {
        parentDIV = $(this).parent();
        var bigImg = parentDIV.find(".bigImg");

        // if the large image IMG element does not already exist, create it
        if (bigImg.length == 0) {
            var bigImagePath = $(this).attr("data-large-src");
            var newImgElem = $("<img />");
            newImgElem.attr({ "src": bigImagePath, "class": "bigImg", "title": "Click On Image To Close", "onclick": "clearimgsrc(this)" });
            newImgElem.appendTo(parentDIV);
        }
    });

    $('.bigDiv').hover(function () {
        zImg = $(this).find(".zImg");
        //zImg.css("visibility", "visible");
        zImg.show('slow');    
    }, function () {
        zImg = $(this).find(".zImg");
        //zImg.css("visibility", "hidden");
        zImg.hide('fast');
    });

});

    function clearimgsrc(elem) {
       $(elem).parent().find(".zImg").hide();
       $(elem).remove();  // get rid of the IMG tag completely
    };

CSS：

.bigDiv
{
    display: inline;
}

.smImg
{
    width: 220px;
    height: 220px;
    cursor: pointer;
}

.bigImg
{
    padding: 5px;
    border: 1px solid #C0C0C0;
    width: 480px;
    height: 480px;
    cursor: pointer;
    cursor: zoom-out;
    position: absolute;
    margin-left: -350px;
    margin-top: -130px;
    z-index: 200;
    background-color: #FFFFFF;
}

.zImg
{
    width: 44px;
    height: 44px;
    cursor: pointer;
    cursor: zoom-in;
    position: relative;
    margin-left: -50px;
    display: none;
    /*visibility: hidden;*/
}

还有 HTML：

<link href="Scripts/picpop.css" rel="stylesheet" />
<script src="Scripts/picpop.js"></script>
<div class="bigDiv">
    <img src="images/products/prodmedium/TC-Chelsea-Mushroom2.jpg" alt="" class="smImg">
    <img src="Images/MagIconPlus1smT.png" alt="" class="zImg" data-large-src="images/products/prodlarge/TC-Chelsea-Mushroom2.jpg"  title="Click Here To Zoom"/>
</div>
<br />
<br />
<div class="bigDiv">
    <img src="images/products/prodmedium/TL-AdornCB-Fustic.jpg" alt="" class="smImg">
    <img src="Images/MagIconPlus1smT.png" alt="" class="zImg" data-large-src="images/products/prodlarge/TL-AdornCB-Fustic.jpg" title="Click Here To Zoom" />
</div>

希望这可以帮助除我之外的其他人（jQuery 的完全新手）