且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-10-25 12:05:16

是否建议其他方法?

只需为所有按钮设置一个处理程序,然后为图像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...

  1. ... 2张黑白图像,因此设置为彩色并存储设置的按钮 他们.
  2. ... 2张彩色图像,这些图像是通过与 单击,因此将它们设置为黑白并清除 按钮的记录 他们的颜色.
  3. ... 2张彩色的图像,但是都由不同的按钮设置,因此 单击按钮将无效.
  4. ... 2张彩色图像,但是按钮只设置了其中一张 点击,因此使一张图像黑白 并删除按钮的记录 使其变色.
  5. ... 2张图像(1色和1 b/w),彩色的图像由 单击该按钮,所以可以更改 颜色为黑白并擦除 按钮的记录 颜色,或将黑白设为一种颜色,然后 存储哪个按钮使它变色. (不是 确定要哪个.)
  6. ... 2张图像(1色和1 b/w),彩色的图像由a设置 不同的按钮,因此请勿更改 颜色为一,但将黑白更改为 颜色,并存储哪个按钮 颜色.
  7. ... 1张黑白图像,因此设置为彩色并存储设置该图像的按钮.
  8. ... 1张彩色图片,该图片由与原本相同的按钮设置 单击,因此将其设置为黑白并清除 按钮的记录 颜色.
  9. ... 1是彩色图像,并且是由其他按钮设置的,因此 单击按钮将无效.
  1. ...2 images that are b/w, so set to color and store which button set them.
  2. ...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.
  3. ...2 images that are color, but both set by different buttons, so the button clicked will have no effect.
  4. ...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.
  5. ...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.)
  6. ...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.
  7. ...1 image that is b/w, so set to color and store which button set it.
  8. ...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.
  9. ...1 image that is color, and was set by a different button, so the button clicked will have no effect.