JSFiddle Example

Question

我正在尝试创建一个脚本：

单击图像后更改图像，
然后恢复原始图像，
无论何时点击屏幕上的任何地方。

目前，我的脚本仅在单击确切图像时才会更改。

点击时更改的图片：

<!-- CardStatus -->
<img src="toggle-on.png" class="img-swap"/>

点击时更改图像的jQuery脚本：

/* ToggleOn & ToggleOff */
$(function () {
    $(".img-swap").live("click", function () {
        if ($(this).attr("class") == "img-swap") {
            this.src = this.src.replace("toggle-on", "toggle-off");
        } else {
            this.src = this.src.replace("toggle-off", "toggle-on");
        }
        $(this).toggleClass("toggle-on");
    });
});

Answer 1

感谢@WASasquatch，

已更改 "body"至document。可以找到here的基本原理。

您可以将重置回调附加到body.onclick事件：

$(".img-swap").click(function(e) {
    e.stopPropagation() // Stop this click from triggering the <body> click event
    /* toggle code here */
});

$(document).click(function(e) {
    /* un-toggle code here */
});

在旁注中，live()为deprecated since jQuery 1.7 and removed in 1.9。是否有一个特殊原因而不是bind() *或on() **？

* bind()自jQuery 1.0以来一直存在，所以总体上得到了最好的支持（到目前为止）。

** on()是最新的事件附加者，将来可能会弃用bind()。无论如何，bind()会映射到源中的on()。

Answer 2

以下是使用.bind()作为 Joel 建议的示例的更新代码，因为他是对的，它对此有最好的支持。如果图像是单击的，它将交换图像，如果再次单击它，它将更改回来，因为井点击身体的任何位置。由于图像主机的动态特性，我不得不使用完整的URL，但是您的原始替换代码应该可以正常工作。

而不是运行两个函数，我们将其缩小为一个。这可能不适用于其他.click()事件，与其他答案相同，而不添加像我在此函数中所做的事件处理程序并停止对.click()事件的预测。

var img = $('.img-swap'),
    imgs = new Array('http://s27.postimg.org/i6knc8y0j/img1.jpg', 'http://s12.postimg.org/k68so1del/img2.jpg'); // Off is the first image
    isOn = false;

$(document).bind("click", function(e) {

    if ( $(e.target).attr('class') == img.attr('class') ) { // Did we click on the image?

        if ( isOn == false ) {

            img.attr('src', imgs[1]);
            isOn = true;

        } else {

            img.attr('src', imgs[0]);
            isOn = false;

        }

    } else { // Nope, must be the document or something else

        if ( isOn ) {

            img.attr('src', imgs[0]);
            isOn = false;

        }

    }

});

JSFiddle Example

下面的方法尝试使用动态元素。如果多张卡一次翻转，并且仅关闭最后点击的卡，则此功能无效。

var lastClick = undefined;

$(document).bind("click", function(e) {

    if ( $(e.target).attr('class') == 'img-swap' ) {

        var targetimg = $(e.target);
        lastClick = $(e.target);

        if ( targetimg.attr('src').indexOf('toggle-on') !== -1 ) {

            targetimg.attr('src', targetimg.attr('src').replace('toggle-on', 'toggle-off'));

        } else if ( targetimg.attr('src').indexOf('toggle-off') !== -1 ) {

            targetimg.attr('src', targetimg.attr('src').replace('toggle-off', 'toggle-on'));                
        }

    } else {

        if ( lastClick && lastClick.attr('src').indexOf('toggle-on') !== -1 ) {

            lastClick.attr('src', lastClick.attr('src').replace('toggle-on', 'toggle-off'));
            lastClick = undefined;


        }

    }

});

因此，如果正在翻转多张卡片，您可能需要立即使用类img-swap关闭所有图像标记。

var imageTags = $('.img-swap'),
    lastClick = undefined;

$(document).bind("click", function(e) {

    if ( $(e.target).attr('class') == 'img-swap' ) {

        var targetimg = $(e.target);
        lastClick = $(e.target);

        if ( targetimg.attr('src').indexOf('toggle-on') !== -1 ) {

            targetimg.attr('src', targetimg.attr('src').replace('toggle-on', 'toggle-off'));

        } else if ( targetimg.attr('src').indexOf('toggle-off') !== -1 ) {

            targetimg.attr('src', targetimg.attr('src').replace('toggle-off', 'toggle-on'));                
        }

    } else {

        imageTags.each(function() {

            if ( $(this).attr('src').indexOf('toggle-on') !== -1 ) {

                $(this).attr('src', $(this).attr('src').replace('toggle-on', 'toggle-off'));

            }

        });

    }

});

点击后更改图像，点击任意位置恢复

2 个答案:

JSFiddle Example

JSFiddle Example