Question

我有一个图像，当有人点击它上面的按钮时我想要改变它（从image1.jpg到image2.jpg）我目前有一个jQuery改变了图片但我不能让它改回来如果我点击按钮再次。

此外，我还想要它，如果我点击另一个可以改变另一组图像的按钮，让任何已经改变的图像回到它们的初始图像。

实施例：我点击一个将image1.jpg更改为image2.jpg的按钮然后我点击一个将image3.jpg更改为image4.jpg的按钮，但它也将image2.jpg更改回图像1.

这是我目前的jQuery：

$(document).ready(function() {
 $("#btn1").click(function() {
     $("#blue").toggle(function() {
        $(this).attr('src', 'images/image2.jpg');
     });
  });
});

HTML

<button id="btn1"> CLICK ME </button>
<br>
<img id="blue" src="images/image1.jpg">
<br><br>
<button> CLICK ME </button>
<br>
<img id="green" src="images/image3.jpg">

Answer 1

试试这个：

$(function() {
  $("#btn1").on('click', function() {
     if ($(this).hasClass('toggled-image')) {
        // remove flag that button has been clicked
        $(this).removeClass('toggled-image');

        // change image back to image1.jpg
        $("#blue").attr('src', 'images/image1.jpg');
     } else {
        // add flag that button has been clicked
        $(this).addClass('toggled-image');

        // change image to image2.jpg
        $("#blue").attr('src', 'images/image2.jpg');
     }
   });
});

您只需在按钮上添加某种标记即可。您可以通过使用全局变量标志或仅向按钮添加类名来实现此目的。

Answer 2

$(document).ready(function() {
 $("#btn1").click(function() {

     $("#blue").toggle(function() {
        var flag = $(this).attr('src') == 'images/image2.jpg' ? 'images/image1.jpg' : 'images/image2.jpg';
        $(this).attr('src', flag);
     });

 });
});

像这样，您可以使用标记“切换”src。

使用?:的构造是conditional ternary。

当然，如果您从未更改或添加图像的名称，这当然也可以。此解决方案不动态！

我认为你想要的toggle是

HTML

<img src="images/image1.jpg">
<img src="images/image2.jpg" style="display:none">

JS

$("#blue").click(function() {
   $('img').toggle()
});

Answer 3

您可能希望使用一个图像标记执行此操作并更改其来源。

HTML

<button id="btn1"> CLICK ME </button>
<br>
<img src="images/image1.jpg">

JS

$(document).ready(function() {
  $("#btn1").click(function() {
    var elm = $("#blue")
    var src = elm.attr('src');
    if(src === "images/image2.jpg")
      elm.attr('src', 'images/image1.jpg');
    else
      elm.attr('src', 'images/image2.jpg');
  });
});

你可以通过使用类来改进这一点，因为在JS中硬编码图像路径很麻烦。使用类似的东西：

if(elm.hasClass('isBlue') {
  //change src and remove class
else
  //change src and add class

Answer 4

我不相信切换真的是最好的选择。如何css类和jquery：

<强> HTML

<body>
    <button id='btn1' >Click Me</button>
</body>

<强>的javascript

$(document).ready(function() {
    $("#btn1").click(function(e) {
        if($(this).hasClass("clicked")) {
            $(this).removeClass("clicked");
        } else {
            $(this).addClass("clicked");
        }
    });
});

<强> CSS

button
{
     background-image: url('/images/image1.jpg');
}

button .clicked
{
     background-image: url('/images/image2.jpg');
}

Answer 5

我真的很喜欢我前一段时间遇到过的解决方案： https://stackoverflow.com/a/4911660/1524085

JSFIDDLE DEMO

代码：

(function($) {
    $.fn.clickToggle = function(func1, func2) {
        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function() {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };
}(jQuery));

这就是它的使用方法（见演示）：

$("#btn1").clickToggle(function () {
    $("#blue").attr('src', 'http://placehold.it/350x150&text=2');
}, function () {
    $("#blue").attr('src', 'http://placehold.it/350x150&text=1');
});

如何使用jQuery在click上切换属性？

5 个答案: