Question

解释情况。

在php页面中，有一个动态生成的菜单，包含任意数量的项目/链接，如下所示：

<ul class="main-portf">
<li><a href="#" class="tabs" rel="1" title="item1" >item1</a></li>
<li><a href="#" class="tabs" rel="10" title="item2" >item2</a></li>
<li><a href="#" class="tabs" rel="10" title="item3" >item3</a></li>
<li><a href="#" class="tabs" rel="10" title="item4" >item4</a></li>
</ul>

上面菜单中的每个链接都会显示不同的项目库。每个画廊最多可以有8个项目（暂时）。点击第一个链接（rel = 1），它将显示以下图库：

<div class="thumbspart" id="tabs-1">
<div class="thumbblock">
    <div class="thumb"><a href="path/to/large/jpg" rel="prettyPhoto[gal1large]" title="demo title" class="testremove"><img src="path/to/small/jpg" alt="demo title"></a></div>
    <div class="title"><a href="path/to/large/jpg" rel="prettyPhoto[gal1small]" title="demo title">Demo Title</a></div>
    <p>some info here</p>
</div>

<div class="thumbblock">
    <div class="thumb"><a href="path/to/large/jpg" rel="prettyPhoto[gal1large]" title="demo title" class="testremove"><img src="path/to/small/jpg" alt="demo title"></a></div>
    <div class="title"><a href="path/to/large/jpg" rel="prettyPhoto[gal1small]" title="demo title">Demo Title</a></div>
    <p>some info here</p>
</div>

...

</div>

所有图库都预先加载到页面中，并且没有任何内容填充AJAX调用。

所有图库都在其容器内，id =“tab-x”，其中x等于菜单链接的rel值。

每个图库项目都有3行“数据”：图像拇指，图像标题，图像描述/文本。

两个链接（用拇指和标题）打开一个带有大图像加上其他信息的模态。模态脚本（类似于灯箱）需要在每个链接中存在rel属性。基于该rel属性，它对所有图库项目进行分组和计数。

网站所有者要求对拇指图像进行悬停效果。因此，当用户将鼠标悬停在图像上时，图像会稍微褪色，并在其上方显示新的小图像。单击新图像应打开模态。

问题

我的问题是新的悬停图片覆盖了带有附加链接的原始图像。所以我想添加一个新链接以及悬停图像，其中包含模态脚本所需的所有属性。

我的最终js看起来像这样：

$(".thumb").mouseenter(function () 
{
    var myurl = $(this).find("a").attr("href");
    var myrel = $(this).find("a").attr("rel");
    var mytitle = $(this).find("a").attr("title");


    var testVat = $(this).parent().parent().attr("id");
    var myVar = testVat.split("-");
    var myID = parseInt(myVar[1]);

    $(this).prepend('<a href="'+myurl+'" class="pozhov" rel="'+myrel+'" title="'+mytitle+'"></a>');
    $(this).find("a.testremove").attr('rel', 'rel-'+myrel); // rename rel to avoid conflict with wrong counter
    showGal(myID);
    $('.pozhov').fadeIn(0);

})
.mouseleave (function () 
{
        var myrel = $(this).find("a.testremove").attr("rel");
        var myVar = myrel.split("-");           
        $(this).find("a.testremove").attr('rel', myVar[1]); // restore rel name to original one             


    $('.pozhov').fadeOut(0).delay(0).queue(function()
    { 
        $(this).remove();           
    });
});

简而言之，当用户在图像中盘旋时：

从现有网址
创建一个新链接，将具有与原始链接
将旧的rel属性重命名为其他内容，以避免与模态脚本冲突

当用户将鼠标悬停在图像之外时：

恢复原始rel属性的旧名称
删除虚假链接

这应该有效。但事实并非如此。图像上的模态将无法打开或显示错误的计数器，或者它只能工作一次（在第一次关闭后不会执行）。图像标题链接上的模式完美无缺。

我为此页面使用的更多js代码（如果它有所不同）：

// tabs galleries

$(".tabs").click(function () 
{   
    $(".tabs").removeClass("active");

    var myID = $(this).attr("rel");
    $(this).addClass("active");

    //hide all "tabs-xx" divs
    $("div[id^='tabs-']").hide();

    // show the one we want
    $("#tabs-"+myID).fadeIn(1000);
    showGal(myID);

return false;
}); 



// function to fire modal script after show/hide    
function showGal(i)
    {
        $("a[rel^='prettyPhoto[gal"+i+"large]']").prettyPhoto({
            // modal options
        });

        $("a[rel^='prettyPhoto[gal"+i+"small]']").prettyPhoto({
            // modal options
        }); 
    }

如果您想知道核心脚本：

Jquery core 1.7.2
Modal prettyPhoto脚本（灯箱克隆）

显示/隐藏＆amp;模式的麻烦

0 个答案: