代码之家 › 专栏 › 技术社区 › Zeus

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

jquery-ui jquery javascript

Zeus · 技术社区 · 14 年前

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

按钮2单击-->与图像2相同
按钮3单击-->与图3相同

到目前为止,我的代码部分工作。问题是,当我点击按钮1,然后点击按钮2….在这一点上,image1和image2都将保留为彩色图像。

second:toggle image2 从黑白到彩色图像

代码

<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 &燃气轮机;

<script &燃气轮机;

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

</script

更新代码:

这就是我要做的。正如你所看到的,我的类之间的图像重叠。因此一个图像可以有多个类。这会导致按钮切换已切换的图像。

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

2 回复 | 直到 14 年前

user113716 14 年前

介意我建议一个不同的方法吗?

只需为所有按钮设置一个处理程序,并为以相同编号结尾的图像标识。

src _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个彩色图像,但只有一个是通过按钮设置的点击,所以做一个图片b/w 删除按钮的记录这让它变成了颜色。

…2个图像(1个彩色和1个黑白),其中一个是由按钮点击了,所以要么改变把颜色调成黑白,然后把颜色,或使黑白一种颜色,和

不同的按钮,所以不要更改给一个上色,但把黑白的改成颜色,并存储哪个按钮颜色。

…1个图像是黑白的,所以设置为彩色并存储哪个按钮设置它。

…1个图像是彩色的,由与单击,所以将其设置为b/w并擦除颜色。

…1个图像是彩色的,由不同的按钮设置,因此单击按钮将不起作用。

Kris 14 年前

switchToBW 和一个 switchToColor 功能。

点击你会切换到所有的图像黑白,然后只是一个你想要的颜色。

“更好”的方法是: