javascript - 点击时改变图像，有mouseenter()方法和mouseleave()

Question

在标记中有图标图像。

$('.classSelection').find('.funcName').on({
        mouseenter: function (e) {
            var dataTarget = e.currentTarget.dataset.target;
            var imgHover =  ('//dustfade.com/img/' + dataTarget + '_hover_ico.png');
            $('.classSelection').find('.'+ dataTarget + '_ico').find('img').attr('src',imgHover);
        },
        mouseleave: function (e) {
            //stuff to do on mouse leave
            var dataTarget = e.currentTarget.dataset.target;
            var imgName = ('//dustfade.com/img/' + dataTarget + 'hover_ico.png');
            $('.classSelection').find('.'+ dataTarget + '_ico').find('img').attr('src',imgName);
        },
        click: function (e) {
        //stuff to do on mouse leave
        var dataTarget = e.currentTarget.dataset.target;
        var imgName = ('//dustfade.com/img/' + dataTarget + '_ico.png');
        $('.classSelection').find('.'+ dataTarget + '_ico').find('img').attr('src',imgName);
        },

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="funcName assault_ico" data-target="assault">
            <img src="http://via.placeholder.com/75x75" width="75" height="75">
            <p>
                Assault
            </p>
        </div>
        <div class="funcName medic_ico" data-target="medic">
            <img src="http://via.placeholder.com/75x75" width="75" height="75">
            <p>
                Medic
            </p>
        </div>

使用 mouseenter() 方法，图标图像被替换为更亮的版本。
通过mouseleave()方法，图标图片被替换成原来的样子。

当我单击 () 时，我需要禁用将图像替换为原始图像 我不知道如何正确地做到这一点。

Answer 1

既然你说如果点击不同的图标你需要回到正常状态，我认为最好的办法是使用点击处理程序添加一个名为 clicked 的类，然后在其他处理程序中测试它。

$('.classSelection').find('.funcName').on({
        mouseenter: function (e) {
            var dataTarget = e.currentTarget.dataset.target;
            var imgHover =  ('//dustfade.com/img/' + dataTarget + '_hover_ico.png');
            $('.classSelection').find('.'+ dataTarget + '_ico').not('.clicked').find('img').attr('src',imgHover);
        },
        mouseleave: function (e) {
            //stuff to do on mouse leave
            var dataTarget = e.currentTarget.dataset.target;
            var imgName = ('//dustfade.com/img/' + dataTarget + 'hover_ico.png');
            $('.classSelection').find('.'+ dataTarget + '_ico').not('.clicked').find('img').attr('src',imgName);
        },
        click: function (e) {
            var dataTarget = e.currentTarget.dataset.target;
            $('.classSelection').find('.'+ dataTarget + '_ico').trigger('mouseenter').addClass('clicked').siblings().removeClass('clicked').trigger('mouseleave'));
        },

    });