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

您可以在选择项目时添加课程：

$('.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);
            }
        });
}

Answer 2

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

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

jquery悬停并单击冲突

2 个答案: