jquery悬停和点击冲突

Question

我正在使用 jQuery 为徽标执行活动、悬停、取消悬停操作。我知道有更好的方法，使用 css，但我需要使用 jQuery，因为徽标是在 php.

中生成的

所以，这里是 html。

<li>
   <input type="radio" name="payment_system" id="YANDEXMONEY" value="YANDEXMONEY">
   <label for="YANDEXMONEY"><img class="payment-system-img" src="images/icons/icon-ym.png" /></label>
   <div id="ym-price" class="price"><span>500</span> руб.</div>
</li>

激活它

$('.payment-system-img').click(function() {
    makeAllInactive();
    makeActive($(this));
});

使用的函数

function makeAllInactive() {
    $('.payment-system-img').each(function() {
        var imgSrc = $(this).attr('src');

        if(imgSrc.indexOf('-hover') != -1) {
            var src = imgSrc.replace('-hover', '');
            $(this).attr('src', src);
        }
    });
}

function makeActive(img) {
    var imgSrc = img.attr('src').split('.');

    if(imgSrc[0].indexOf('-hover') == -1) {
        img.attr('src', imgSrc[0] + '-hover.' + imgSrc[1]);
    }
}

使其在悬停时处于活动状态，在悬停时处于非活动状态。

$('.payment-system-img').hover(
    function() {
        makeActive($(this));
    },
    function() {
        makeInactive($(this));
    }
);

使用的函数

function makeInactive(img) {
    var imgSrc = img.attr('src');

    if(imgSrc.indexOf('-hover') != -1) {
        var src = imgSrc.replace('-hover', '');
        img.attr('src', src);
    }
}

冲突来了。当我点击图像时它会激活，但是当我在点击后取消悬停它时，它会因为悬停功能而变得不活动。如何使用 jQuery 正确地做到这一点而没有冲突？谢谢。

Answer 1

只需使用一个全局变量来跟踪 clicking/hovering/stuffs、

的状态

var clicked = 0;

$('.payment-system-img').click(function() {
    clicked = !clicked; // just flips the state, 
                        // so upon re-clicking, 
                        // default behaviour resumes.
    makeAllInactive();
    makeActive($(this));
});

$('.payment-system-img').hover(
        function() {
            makeActive($(this));
        },
        function() {
            if (!clicked) {
                makeInactive($(this));
            }
        }
    );

Answer 2

您可以在选择项目后添加 class：

$('.payment-system-img').click(function() {
    makeAllInactive();
    makeActive($(this).addClass('selected'));
});

然后，在 makeInactive() 函数中，您首先检查 class 并在出现 class 时跳过它：

function makeInactive(img) {
    if (img.hasClass('selected')) { return; }
    var imgSrc = img.attr('src');

        if(imgSrc.indexOf('-hover') != -1) {
            var src = imgSrc.replace('-hover', '');
            img.attr('src', src);
        }
    }

最后，在 makeAllInactive() 中，您需要将其删除：

function makeAllInactive() 
{
    $('.payment-system-img')
        .removeClass('selected')
        .each(function() {
            var imgSrc = $(this).attr('src');

            if(imgSrc.indexOf('-hover') != -1) {
                var src = imgSrc.replace('-hover', '');
                $(this).attr('src', src);
            }
        });
}

jquery悬停和点击冲突

jquery hover and click conflict

javascript

jquery

click

hover