Question

我尝试编写一个jQuery代码来管理我的图像按钮。

我想创建具有此行为的按钮： http://jsfiddle.net/Xroad/fhL7w/17/

但区别在于它们是图像按钮。我有一些。所以我想管理他们的文件名“-normal”，“ - hover”。

我的图片按钮表现不像我一样： http://jsfiddle.net/Xroad/z562Y/ 我该如何解决？

我写了这个：

<img id="btn-clients" class="btn toggleImg rollover" src="http://pepitodanger.free.fr/forms/images/clients-normal.png" alt="">

function toggleImg() {
    var file = $(this).attr('src');
    var src = (file.indexOf('-hover') == -1) ? file.replace("-normal", "-hover") : file.replace("-hover", "-normal");
    $(this).attr("src", src);
}

$('.toggleImg').hammer().on(Modernizr.touch ? 'tap' : 'click', toggleImg);



$('img.rollover').on('mouseenter', function () {
    this.src = this.src.replace("-normal", "-hover");
});

$('img.rollover').on('mouseleave', function () {
    this.src = this.src.replace("-hover", "-normal");
});

Answer 1

function toggleImg(e) {
    if (e.type == 'click') {
        $(this).data('clicked', !$(this).data('clicked'));
    }else if (!$(this).data('clicked')) {
        this.src = this.src.indexOf('-hover') == -1 ? this.src.replace("-normal", "-hover") : this.src.replace("-hover", "-normal");
    }
}

$('.toggleImg').hammer().on(Modernizr.touch ? 'tap' : 'click', toggleImg);
$('img.rollover').on('mouseenter mouseleave', toggleImg);

FIDDLE

Answer 2

问题是示例代码做了两件事：

更改颜色
更改课程

而您的代码只做一件事：

更改src图片

因此，代码中的两个事件（悬停，单击）都会执行相同的操作，然后撤消相同的操作。为了实现示例的结果，您应该将事件分解为两件事：

更改背景
更改课程

查看代码here的修改版本。我所做的是简化标记并将img转换为div（以背景设置样式）：

<div id="btn-clients" class="btn inactive" />

然后我用悬停更改设置了它，并为点击事件创建了一些额外的类：

html, body {
    background: #d2d4d5;
}
.btn {
    cursor: pointer;
    width: 26px;
    height: 19px;
    background: url(http://pepitodanger.free.fr/forms/images/clients-normal.png);
}

.btn:hover {
    background: url(http://pepitodanger.free.fr/forms/images/clients-hover.png);
}

.active {
    background: url(http://pepitodanger.free.fr/forms/images/clients-hover.png);
}

.inactive {
    background: url(http://pepitodanger.free.fr/forms/images/clients-normal.png);
}

最后，JavaScript被简化以匹配原始示例，只需切换类：

$('.btn').on(Modernizr.touch ? 'tap' : 'click', function () {
    $(this).toggleClass('inactive active');
});

这与示例的实现更加匹配，因此模仿了功能。

悬停+单击图像按钮

2 个答案: