Question

我有两个图像点击我在使用addClass添加一个名为'active'的类并将图像更改为活动状态颜色： -

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

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

    });

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

         $(this).addClass('active');
         $('#img-onlinebooking-cash').removeClass('active');
         $(this).attr("src", "images/bookaccount-a.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");

    });

基本上，我想要工作的方式是，当您单击图像时，它会更改为活动图像，并在悬停时更改为悬停图像。同时，如果图像处于活动状态，我不希望悬停状态做任何事情。

这几乎正常，因为你可以看到here。

唯一的问题是，当我点击其他标签之一时，它会按预期将点击的项目更改为“有效”，但在鼠标输出时，它会将其恢复为默认颜色，此时它应保持为活动颜色。 / p>

我有什么想法可以解决这个问题？（希望我已经解释过这个没问题。）

Answer 1

理想情况下，您应该使用CSS作为其中的大部分内容。变得更清洁，没有处理悬停事件。

<强> HTML

将图像更改为div

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

<强> JS

定位所有元素而不是当前元素并删除类，然后添加到当前。

$("#img-onlinebooking-guest").click(function () {
    $('#main-online-user a').not(this).removeClass('active');
    $(this).addClass('active');
});

$("#img-onlinebooking-acc").click(function () {
    $('#main-online-user a').not(this).removeClass('active');
    $(this).addClass('active');
});

$("#img-onlinebooking-cash").click(function () {
    $('#main-online-user a').not(this).removeClass('active');
    $(this).addClass('active');
});

<强> CSS

活动和悬停样式是相同的，因此不会意外删除它。

#main-online-user img {
    width:102px;
    height:42px;
}
#img-onlinebooking-acc {
    background:url(images/bookaccount.png);
}
#img-onlinebooking-guest {
    background:url(images/bookguest.png);
}
#img-onlinebooking-cash {
    background:url(images/bookcash.png);
}

#img-onlinebooking-acc.active,
#img-onlinebooking-acc:hover {
    background:url(images/bookaccount-a.png);
}
#img-onlinebooking-guest.active,
#img-onlinebooking-guest:hover {
    background:url(images/bookguest-a.png);
}
#img-onlinebooking-cash.active,
#img-onlinebooking-cash:hover {
    background:url(images/bookcash-a.png);
}

Answer 2

您的问题是在设置活动类之前设置了事件，因此事件已在那里执行此操作

$('#img-onlinebooking-guest').hover(

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

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

    });

    $('#img-onlinebooking-acc').hover(

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

        function () {
            if(!$(this).hasClass("active"){
                 $(this).attr("src", "images/bookaccount.png");
            }

    });

简而言之，如果Object具有'active'类，请不要做任何事情。所以从技术上讲，你的问题不在于Click事件，即使在UI中看起来如此

Answer 3

试试这个

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

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

});

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

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

});

首先，您需要从其他类中删除活动类，然后您可以分配给您的特定

jQuery addClass没有按预期工作

3 个答案: