Javascript 如何使用jQuery在单击时切换属性？_Javascript_Jquery_Html_Toggle

Javascript 如何使用jQuery在单击时切换属性？

javascript jquery html

Javascript 如何使用jQuery在单击时切换属性？,javascript,jquery,html,toggle,Javascript,Jquery,Html,Toggle,我有一张图片，当有人单击上面的按钮时，我想更改它（从image1.jpg到image2.jpg）。我目前有一个jQuery，它更改了图片，但如果我再次单击按钮，我无法将其更改回去此外，我还希望这样，如果我要点击另一个按钮，改变另一组图像，使任何已经被改变的图像返回到其初始图像例如：我单击一个将image1.jpg更改为image2.jpg的按钮然后我单击一个按钮，将image3.jpg更改为image4.jpg，但它也将image2.jpg更改回Image1 这是我当前的jQuery：

我有一张图片，当有人单击上面的按钮时，我想更改它（从image1.jpg到image2.jpg）。我目前有一个jQuery，它更改了图片，但如果我再次单击按钮，我无法将其更改回去

此外，我还希望这样，如果我要点击另一个按钮，改变另一组图像，使任何已经被改变的图像返回到其初始图像

例如：我单击一个将image1.jpg更改为image2.jpg的按钮然后我单击一个按钮，将image3.jpg更改为image4.jpg，但它也将image2.jpg更改回Image1

这是我当前的jQuery：

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

HTML

点击我





点击我

试试这个：

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

您只需在按钮上添加某种标志，表示它已被单击。您可以通过使用全局变量标志或仅向按钮添加类名来实现这一点

$(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

所使用的构造

？：

是

当然，这也只适用于从不更改或添加图像名称的情况。此解决方案不是动态的

我认为你想要的是

HTML

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

HTML

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

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

我不认为切换是这里最好的选择。css类和jquery如何：

html

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

css

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

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

我很喜欢不久前遇到的这个解决方案：

代码：

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

您可能使用了一个保留的关键字

开关

。我们需要改变这一点。即使我不反对你的解决方案，我也不会将

src

与硬编码的

images/image2.jpg

图像名称更改怎么办？我添加了

toggle

，如你所愿！漂亮干净的解决方案！

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

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

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

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

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

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

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

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