Question

在页面上悬停服装（图片）时遇到类explore-outfit的问题。它们绝对定位，有时可能会相互重叠。当悬停这些图像时，根据与产品相关的弹出窗口显示。（是的我知道我可以使用数据属性而不是这种混乱的方式来检索ID但暂时没关系）

我有 jQuery：

$('#outfit-area-public').on('mouseover', '.explore-outfit', function(e) {  
        //Get id of clicked image
        var idArray = $(this).attr("id").split("prodimage_");   
        //array of split between _id, example: [0] = prod, [1] = 287
        var newId = idArray[1]; 
        var showDetails = '#prod_' + newId;

        //Show div with id prod_{id}            
        $(".details-info").hide();        
        $(showDetails).show(1000); //showDetails element has class details-info
    });

问题是$(".details-info").hide();在显示当前悬停的装备之前并不总是隐藏每个弹出窗口（带有类详情信息）（因此同时显示2个服装弹出窗口）。

我尝试过使用hide（）回调，但这也不起作用：我缺少什么？

$( ".details-info").hide( "fast", function() {
            $(showDetails).show();
});

Answer 1

如果有人遇到类似的问题，这是我的解决方案（通过隐藏或未隐藏时全局变量的检查值）。有时在这里创建问题以帮助实际找出如何解决问题是有帮助的。

var showingPoup = false;

$('#outfit-area-public').on('mouseover', '.explore-outfit', function(e) {  
            if (showingPopup === false) {
                //Get id of clicked image
                var idArray = $(this).attr("id").split("prodimage_");   
                //array of split between _id, example: [0] = prod, [1] = 287
                var newId = idArray[1]; 
                var showDetails = '#prod_' + newId;

                //Show div with id prod_{id}                      
                showingPopup = true;
                $(".details-info").hide();                    
                $( showDetails ).show( 500, function() {
                       showingPopup = false;        
                });
            }

    });

在绝对定位的元素/图像上仅显示悬停图像？

1 个答案: