jQuery mouseenter toggle

Question

我有三个'标签'，我使用的图像如下： -

每个标签有三张图片： -

• bookaccount.png（默认 - 橙色）
• bookaccount-a.png（活跃 - 白色）
• bookaccount-h.png（悬停 - 蓝色）

与bookcash.png和bookguest.png相同。

默认情况下，我希望'Guest'保留为活动标签，其他标签保留为橙色，这就是我所拥有的：

<div id="main-online-user">

    <a href="javascript:void(0)" onclick="changesrc('main-online-frame','http://www.marandy.com/one2oneob/login-guest.php')"><img alt="One 2 One Guest" id="img-onlinebooking-guest" class="left" src="images/bookguest-a.png" /></a>

    <a href="javascript:void(0)" onclick="changesrc('main-online-frame','http://www.marandy.com/one2oneob/login.php')"><img alt="One 2 One Account" id="img-onlinebooking-acc" class="left" src="images/bookaccount.png" /></a>

    <a href="javascript:void(0)" onclick="changesrc('main-online-frame','http://www.marandy.com/one2oneob/login-guest.php')"><img alt="One 2 One Cash" id="img-onlinebooking-cash" class="left" src="images/bookcash.png" /></a>

</div>

对于悬停事件，我现在这样做： -

    $("#img-onlinebooking-guest").hover(function() { 
         $(this).attr("src", "images/bookguest-h.png");
    });

    $("#img-onlinebooking-guest").mouseleave(function() { 
         $(this).attr("src", "images/bookguest.png");
    });

问题在于（比如Guest是活动的 - 白色），我将鼠标悬停在它上面，当我离开该元素时，当它仍然是活动标签时，它会将图像更改回橙色（默认）。

我希望能够做到的是： -

如果图像是活动元素，当您将鼠标悬停在图像上时，没有任何反应。 （这可能是更好的选择）

或者，如果活动元素悬停，则在mouseout上它将恢复为mouseenter事件之前的颜色。

我不知道如何做到这一点，所以我将不胜感激任何帮助！

（我知道我可以使用jQuery选项卡，但客户端想要这些图像，所以我没有选择）

修改::

我已将'active'类添加到＃img-onlinebooking-guest并将jQuery更改为： -

    $("#img-onlinebooking-guest").click(function() { 

         $(this).addClass('active');
         $('#img-onlinebooking-cash, #img-onlinebooking-acc').removeClass('active');
         $(this).attr("src", "images/bookguest-a.png");
         $('#img-onlinebooking-acc').attr("src", "images/bookaccount.png");
         $('#img-onlinebooking-cash').attr("src", "images/bookcash.png");

    });

    $("#img-onlinebooking-acc").click(function() { 

         $(this).addClass('active');
         $('#img-onlinebooking-guest, #img-onlinebooking-cash').removeClass('active');
         $(this).attr("src", "images/bookaccount-a.png");
         $('#img-onlinebooking-guest').attr("src", "images/bookguest.png");
         $('#img-onlinebooking-cash').attr("src", "images/bookcash.png");

    });

    $("#img-onlinebooking-cash").click(function() { 
         $(this).addClass('active');
         $('#img-onlinebooking-guest, #img-onlinebooking-acc').removeClass('active');
         $(this).attr("src", "images/bookcash-a.png");
         $('#img-onlinebooking-guest').attr("src", "images/bookguest.png");
         $('#img-onlinebooking-acc').attr("src", "images/bookaccount.png");

    });

    $('#img-onlinebooking-guest:not(.active)').hover(

        function () {
            $(this).attr("src", "images/bookguest-h.png");
        },

        function () {
            $(this).attr("src", "images/bookguest.png");

    });

    $('#img-onlinebooking-acc:not(.active)').hover(

        function () {
            $(this).attr("src", "images/bookaccount-h.png");
        },

        function () {
            $(this).attr("src", "images/bookaccount.png");

    });

    $('#img-onlinebooking-cash:not(.active)').hover(

        function () {
            $(this).attr("src", "images/bookcash-h.png");
        },

        function () {
            $(this).attr("src", "images/bookcash.png");

    });

看起来很乱，但无论如何，它正在为“访客”标签工作，我在HTML中添加了“活动”类，但是对于其他标签不能正常工作。如果我单击“现金”，它会使图像处于活动状态（白色），但在鼠标输出时它仍然会将颜色恢复为橙色（默认），因为我已经将颜色“活动”添加到此元素上。 / p>

有什么想法吗？

你可以在这里看到; Link

Answer 1

你可以这样做：

点击图片后，设置一个名为active

的课程

$("#img-onlinebooking-guest").click(function () {
    $(this).addClass('active');
});

然后如果它不是活动链接，我们可以做悬停逻辑

$('#img-onlinebooking-guest:not(.active)').hover(

function () {
    $(this).attr("src", "images/bookguest-h.png");
},

function () {
    $(this).attr("src", "images/bookguest.png");
});

Answer 2

我建议您在点击时为.active这样的图片添加新的类名。

然后您可以将此脚本与.not() or :not()：

一起使用

$('[id^="img-onlinebooking"]').not('.active').hover(function() { 
     $(this).attr("src", "images/bookguest-h.png");
});

$('[id^="img-onlinebooking"]').not('.active').mouseleave(function() { 
     $(this).attr("src", "images/bookguest.png");
});

Answer 3

这是因为在更改hover()或mouseleave()事件处理程序中的标签图像之前，您没有设置/检查任何标记。你可以这样做

$("#img-onlinebooking-guest").hover(function() {
         var pathname = window.location.pathname;
         if(pathname.indexOf("/login-guest.php")<0)
         {
           //guest is not active
           $(this).attr("src", "images/bookguest-h.png");
         }
    });

    $("#img-onlinebooking-guest").mouseleave(function() {
         var pathname = window.location.pathname;
         if(pathname.indexOf("/login-guest.php")<0)
         { 
           //guest is not active
           $(this).attr("src", "images/bookguest.png");
         }
    });