更新代码：

Question

基本上我有4个图像和4个按钮。所有4个图像都是黑白的。

Button1点击 - ＆gt;将图像1从黑白切换为彩色图像
Button2点击 - ＆gt;对于image2相同 Button3点击 - ＆gt; image3相同 Button4点击 - ＆gt;对于image4相同

到目前为止，我的代码部分正常运行。问题是，当我单击按钮1然后单击按钮2 ....此时，image1和image2将保持为彩色图像。

我想要做的是在任何按钮点击检查以查看是否有任何其他图像切换为彩色图像，如果是这样，然后将它们切换回黑白，只切换所选图像为彩色图像。

Button2点击 - ＆gt;首先：检查是否有任何图像切换为彩色图像，如果是，则将它们切换回来第二：将图像2从黑白切换为彩色图像

代码

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

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

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

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

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

<script＆GT;

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

</script＆GT;

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

更新代码：

这就是我想要做的。你可以看到我的班级在图像之间重叠。所以一个图像可以有超过1个类。这导致按钮切换到已经处理过的图像。

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

Answer 1

介意我建议采用不同的方法吗？

只需为所有按钮设置一个处理程序，并提供以相同数字结尾的图像ID。

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

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

编辑：已更新，以便仅制作图像颜色的按钮可将其恢复为黑/白。

编辑：考虑到与特定按钮相关联的图片，我们似乎有几种可能性。

编写的代码需要为以下可能的场景包含足够的逻辑：

点击按钮有...


... 2张图片是黑白，所以设置为颜色并存储哪个按钮设置   他们。

... 2个颜色的图像，由同一个按钮设置   单击，将它们设置为黑白并擦除   制作的按钮的记录   他们的颜色。

... 2个颜色的图像，但都由不同的按钮设置，所以   单击按钮将无效。

... 2张颜色的图片，但按钮只设置了其中一张图片   点击，所以使一个图像黑白   并删除按钮的记录   使它变色。

... 2张图像（1色和1 b / w），并且设置了颜色的图像   点击按钮，所以要么改变   颜色一到b / w并擦除   制作它的按钮的记录   颜色，或使黑白成为一种颜色，和   存储哪个按钮使其颜色。（不   确定你想要的。）

... 2张图像（1种颜色和1 b / w），颜色的图像由a设定   不同的按钮，所以不要改变   颜色一，但改变b / w一个   颜色，并存储哪个按钮成功   颜色。

... 1张图片是黑白，所以设置为颜色并存储哪个按钮设置它。

... 1个颜色的图像，由同一个按钮设置   单击，将其设置为黑白并擦除   制作它的按钮的记录   颜色。

... 1图像是颜色，并由不同的按钮设置，所以   单击按钮将无效。

Answer 2

只是切换不会削减它。您需要具体的switchToBW和switchToColor功能。

最简单的方法是： 点击后，您可以将所有图像切换为黑白，然后只切换想要着色的图像。

“更好”的方式是： 点击时，将所有不是b / w的图像切换为b / w，然后再切换想要着色的图像。

如何jQuery切换不同的按钮点击多个图像？

更新代码：

2 个答案: