jQuery如何在不同的按钮单击上切换多个图像?

问题描述：

基本上我有4张图像和4个按钮.所有4张图像均为黑白.

Basically I have 4 images and 4 button. All 4 images are black and white.

按钮1单击->将图像1从黑白图像切换为彩色图像
Button2单击->与image2相同
Button3单击->与image3相同
Button4单击->与image4相同

Button1 click -- > toggles image 1 from black and white to color image
Button2 click -- > same for image2
Button3 click -- > same for image3
Button4 click -- > same for image4

到目前为止，我的代码部分有效.问题是，当我单击按钮1然后单击按钮2时....此时image1和image2都将保留为彩色图像.

So far my code is partially working. Problem is that when I click button 1 and then click button 2....at that point both image1 and image2 will stay as color images.

我想做的是，在任何按钮上单击以查看是否有其他图像被切换为彩色图像，如果是，则将其切换回黑白，仅将选定的图像切换为彩色图像.

What I would like to do is that on any button click check to see if any other images are toggled as color images , if so then toggle them back to black and white and only toggle selected images to color image.

Button2单击->首先:检查是否有任何图像切换为彩色图像，如果是，则将其切换回
第二:将image2从黑白切换为彩色图像

Button2 click -- > First: check to see if any images toggled as color iamges , if so toggle them back
second:toggle image2 from black and white to color images

代码

>
>
>
>

<button id="btn1" >Toggle1</button>
<button id="btn2" >Toggle2</button>
<button id="btn3" >Toggle3</button>
<button id="btn4" >Toggle4</button>

> >

<div class="div1" ><img src="graphics/image1_black.jpg" /></div> <div class="div1 divblack" style="display: none"><img src="graphics/image1.jpg" /></div>

> >

<div class="div2" ><img src="graphics/image2_black.jpg" /></div> <div class="div2 divblack" style="display: none"><img src="graphics/image2.jpg" /></div>

> >

<div class="div3" ><img src="graphics/iamge3_black.jpg" /></div> <div class="div3 divblack" style="display: none"><img src="graphics/image3.jpg" /></div>

> >

<div class="div4" ><img src="graphics/iamge4_black.jpg" /></div> <div class="div4 divblack" style="display: none"><img src="graphics/iamge4.jpg" /></div>

$("#btn1").click(function() {
    $(".div1").toggle();
});
$("#btn2").click(function() {
    $(".div2").toggle();
});
$("#btn3").click(function() {     
    $(".div3").toggle();
});
$("#btn4").click(function() { 
    $(".div4").toggle();
});

================================================ ========================

=========================================================================

这就是我想要做的.如您所见，我的课在图像之间重叠.因此，一张图像可以具有1个以上的类.这会导致按钮切换已经扭曲的图像.

This is what I am trying to do. As you can see my class overlap between images. So one image can have more than 1 class. This is causing buttons to toggle already toggeled images.

<button id="btn1" >Toggle1</button>
<button id="btn2" >Toggle2</button>
<button id="btn3" >Toggle3</button>
<button id="btn4" >Toggle4</button>

<img class="im1" src="image1_bw.jpg" />
<img class="im1 im2" src="image2_bw.jpg" />
<img class="im2 im3" src="image3_bw.jpg" />
<img class="im4" src="image4_bw.jpg" />

<script>

            // Use the same handler for all button elements
            //   where the ID starts with "btn"
    $("[id^=btn]").click(function() {

              // Grab the number from the end of the ID
        var number = this.id.match(/\d+$/)[0];

              // Find the image ID ending in the same number
              //   and modify its src, toggling the "_black" part of it
        var $img = $(".im" + number).attr('src', function(i, attr) {
            return /_bw/.test(attr) ? attr.replace(/_bw/, '') : attr.replace(/.jpg/, '_bw.jpg');
        });

              // Get the rest of elements with IDs starting with "img"
              //    and modify their src, removing "_black" 
        $("[id^=img]").not($img).attr('src', function(i, attr) {
            return attr.replace('_bw', '');
        });
    });          

</script>

答

是否建议其他方法?

只需为所有按钮设置一个处理程序，然后为图像ID分别以相同的数字结尾即可.

Just set up one handler for all the buttons, and give the images IDs that end in the same respective number.

然后只需用相同的数字修改图像的src属性即可切换_black部分，并从其他部分中删除src的_black部分.

Then simply modify the src attribute of the image with the same number to toggle the _black portion, and remove the _black portion of the src from the others.

HTML

<button id="btn1" >Toggle1</button>
<button id="btn2" >Toggle2</button>
<button id="btn3" >Toggle3</button>
<button id="btn4" >Toggle4</button>

<img class="im1" src="image1_bw.jpg" />
<img class="im1 im2" src="image2_bw.jpg" />
<img class="im2 im3" src="image3_bw.jpg" />
<img class="im4" src="image4_bw.jpg" />

jQuery

$("[id^=btn]").click(function () {

    var number = this.id.match(/\d+$/)[0];
    var $img = $(".im" + number);
    var button = this;

    $img.each(function () {
        var $th = $(this);

        if ($th.is('[src*=_bw]')) {
            $th.data('button', button.id);
            $th.attr('src', function (i, attr) {
                return attr.replace(/_bw/, '');
            });
        } else if ($th.data('button') == button.id) {
            if ($th.not('[src*=_bw]').length) {
                $th.attr('src', function (i, attr) {
                    $th.data('button', null);
                    return attr.replace(/.jpg/, '_bw.jpg');
                });
            }
        }
    });
});

编辑:已更新，以使仅使图像变成彩色的按钮可以将其恢复为黑白.

Updated so that only the button that made an image color can bring it back to black/white.

鉴于与特定按钮相关的图像，似乎我们有几种可能性可以考虑.

It seems that we have several possibilities to consider given the images associated with a particular button.

编写的代码将需要为以下可能的情况纳入足够的逻辑:

The code written will need to incorporate sufficient logic for the following possible scenarios:

单击的按钮具有...

The button clicked has...

... 2张黑白图像，因此设置为彩色并存储设置的按钮他们.
... 2张彩色图像，这些图像是通过与单击，因此将它们设置为黑白并清除按钮的记录他们的颜色.
... 2张彩色的图像，但是都由不同的按钮设置，因此单击按钮将无效.
... 2张彩色图像，但是按钮只设置了其中一张点击，因此使一张图像黑白并删除按钮的记录使其变色.
... 2张图像(1色和1 b/w)，彩色的图像由单击该按钮，所以可以更改颜色为黑白并擦除按钮的记录颜色，或将黑白设为一种颜色，然后存储哪个按钮使它变色. (不是确定要哪个.)
... 2张图像(1色和1 b/w)，彩色的图像由a设置不同的按钮，因此请勿更改颜色为一，但将黑白更改为颜色，并存储哪个按钮颜色.
... 1张黑白图像，因此设置为彩色并存储设置该图像的按钮.
... 1张彩色图片，该图片由与原本相同的按钮设置单击，因此将其设置为黑白并清除按钮的记录颜色.
... 1是彩色图像，并且是由其他按钮设置的，因此单击按钮将无效.

...2 images that are b/w, so set to color and store which button set them.
...2 images that are color, that were set by the same button that was clicked, so set them to b/w and erase the record of the button that made them color.
...2 images that are color, but both set by different buttons, so the button clicked will have no effect.
...2 images that are color, but only one of them was set by the button clicked, so make that one image b/w and erase the record of the button that made it color.
...2 images (1 color and 1 b/w), and the one that is color was set by the button clicked, so either change the color one to b/w and erase the record of the button that made it color, OR make the b/w one color, and store which button made it color. (Not sure which you want.)
...2 images (1 color and 1 b/w), and the one that is color was set by a different button, so do not change the color one, but change the b/w one to color, and store which button made it color.
...1 image that is b/w, so set to color and store which button set it.
...1 image that is color, and was set by the same button that was clicked, so set it to b/w and erase the record of the button that made it color.
...1 image that is color, and was set by a different button, so the button clicked will have no effect.

jQuery如何在不同的按钮单击上切换多个图像?

相关推荐