Javascript jquery悬停并单击“冲突”

我正在使用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>

使用的功能

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而不发生冲突？谢谢。

只需使用全局变量来跟踪单击/悬停/填充的状态

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));
            }
        }
    );

---

选择项目后，可以添加类：

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

然后，在

makeInactive（）

函数中，首先检查类，并在类存在时跳过它：

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，因为徽标是在php中生成的

您能对此进行评价吗？@a.Wolff为什么？这没什么大不了的，如果没有提到PHP，我认为这不会有什么大的区别，因为问题不在于PHP/jQuery，而在于它的编写方式。。

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);
            }
        });
}