Javascript / jQuery UI：根據當前的img src從一組圖像中更改元素img src

Question

我有一個包含圖像的畫布元素，最初是一個綠色方塊。 我正在嘗試根據兩組jQuery UI單選按鈕的輸入更改顯示的圖像：第一組允許用戶選擇顏色並有3個選項（紅色/綠色/藍色），第二組允許用戶選擇形狀（圓形/方形）。

我的Javascript代碼聲明了一個圖像數組，然后在選中按鈕選項時將其中一個分配給canvas元素中顯示，如下所示：

var images = new Array();

images[0] = new Image();
images[0].src = '../../../media/images/Red-Circle.png';

images[1] = new Image();
images[1].src = '../../../media/images/Red-Square.png';

images[2] = new Image();
images[2].src = '../../../media/images/Green-Circle.png';

images[3] = new Image();
images[3].src = '../../../media/images/Green-Square.png';

images[4] = new Image();
images[4].src = '../../../media/images/Blue-Circle.png';

images[5] = new Image();
images[5].src = '../../../media/images/Blue-Square.png';


$(function () {
    $("#colour").buttonset();
    $("#shape").buttonset();
});

$('#red').click(function () {
    if ($('#red').is(':checked')) {
        $("#container #image img").attr("src", images[1].src);
    }
});

$('#green').click(function () {
    if ($('#green').is(':checked')) {
        $("#container #image img").attr("src", images[3].src);
    }
});

$('#blue').click(function () {
    if ($('#blue').is(':checked')) {
        $("#container #image img").attr("src", images[5].src);
    }
});

HTML：

<div id="container">
     <div id="image">
          <img src="media/images/Green-Square.png" />
     </div>
</div>

<form>
     <div id="colour">
          <input type="radio" id="red" name="radio">
          <label for="colour1">Red</label>
          <input type="radio" id="green" name="radio" checked="checked">
          <label for="colour2">Green</label>
          <input type="radio" id="blue" name="radio">
          <label for="colour3">Blue</label>
     </div>
</form>
<form>
     <div id="shape">
          <input type="radio" id="circle" name="radio">
          <label for="circle">Circle</label>
          <input type="radio" id="square" name="radio" checked="checked">
          <label for="square">Square</label>
     </div>
</form>

我只能選擇顏色。 在選擇形狀時，我想更改顯示的圖像以保留先前選擇的顏色（例如，如果紅色是當前選擇的顏色，然后用戶選擇了圓形，則顯示的圖像將變為紅色圈而不是綠色或藍色圓圈）。 相反，如果用戶首先選擇了形狀，然后選擇了一種顏色，我希望顯示的圖像保留形狀的選擇。

我有一個模糊的想法，解決方案可能是根據當前索引添加1或從數組索引中減去1 - 但我不知道如何實現它。 我對JS比較新，所以任何幫助都會受到贊賞。 謝謝。

Answer 1

這是一個你正在嘗試做的東西。

https://plnkr.co/edit/jMvjJCxHZzr9dxw5B6RR?p=preview

你需要的功能是

$('#circle').change(function () {
if ($('#circle').is(':checked')) {


    var a = jQuery.grep(images, function( n ,i) {
      if ( n.src == $("#container #image img").attr("src") )
      return i;
    })[0];

    var index = images.indexOf(a);

    $("#container #image img").attr("src", images[index-1].src);
}

}）;

    $('#square').change(function () {
    if ($('#square').is(':checked')) {
   var a = jQuery.grep(images, function( n ,i) {
      if ( n.src == $("#container #image img").attr("src") )
      return i;
    })[0];

    var index = images.indexOf(a);

    $("#container #image img").attr("src", images[index+1].src);
}

顏色選擇按鈕邏輯也不正確，請在那里使用此邏輯。

Answer 2

您可以將圖像存儲在“圖像”對象中並通過字符串訪問它們（ex images [“RedSquare”]）我把它放在一起。 圖像鏈接已斷開但如果您檢查頁面，則可以看到src正在正確更改。

https://jsfiddle.net/5wv5ym5p/

HTML：

<div id="container">
            <div id="image">
                <img src="media/images/Green-Square.png" />
            </div>
        </div>

        <form>
            <div class="shape-config" id="colour">
                <input type="radio" id="red" name="radio">
                <label for="red">Red</label>
                <input type="radio" id="green" name="radio" checked="checked">
                <label for="green">Green</label>
                <input type="radio" id="blue" name="radio">
                <label for="blue">Blue</label>
            </div>
        </form>
        <form>
            <div class="shape-config" id="shape">
                <input type="radio" id="circle" name="radio">
                <label for="circle">Circle</label>
                <input type="radio" id="square" name="radio" checked="checked">
                <label for="square">Square</label>
            </div>
        </form>

JS（需要JQuery）：

var images = {};

images["RedCircle"] = new Image();
images["RedCircle"].src = '../../../media/images/Red-Circle.png';

images["RedSquare"] = new Image();
images["RedSquare"].src = '../../../media/images/Red-Square.png';

images["GreenCircle"] = new Image();
images["GreenCircle"].src = '../../../media/images/Green-Circle.png';

images["GreenSquare"] = new Image();
images["GreenSquare"].src = '../../../media/images/Green-Square.png';

images["BlueCircle"] = new Image();
images["BlueCircle"].src = '../../../media/images/Blue-Circle.png';

images["BlueSquare"] = new Image();
images["BlueSquare"].src = '../../../media/images/Blue-Square.png';


$(function () {
    $("#colour").buttonset();
    $("#shape").buttonset();
});

$('.shape-config input').click(function () {
        var colourId = $("#colour input:checked").attr("id");
    var colour = $('label[for='+colourId+']').text();
    var shapeId = $("#shape input:checked").attr("id");
    var shape = $('label[for='+shapeId+']').text();
        $("#container #image img").attr("src", images[colour+""+shape].src);
});

Answer 3

為什么要使用數組/索引並將其存儲起來呢？

https://jsfiddle.net/0Lqgc3vx/

HTML

<img id="img" src="Green-Square.png" />

<form>
    <input type="radio" name="colour" value="Red">
    <label for="colour1">Red</label>
    <input type="radio" name="colour" value="Green" checked="checked">
    <label for="colour2">Green</label>
    <input type="radio" name="colour" value="Blue">
    <label for="colour3">Blue</label>
</form>

<form>
    <input type="radio" name="shape" value="Circle">
    <label for="circle">Circle</label>
    <input type="radio" name="shape" value="Square" checked="checked">
    <label for="square">Square</label>
</form>

JS

$("input[name='colour']").change(function () {
    $("#img").attr("src", this.value + "-" + $("input[name='shape']:checked").val() + ".png");
});

$("input[name='shape']").change(function () {
    $("#img").attr("src", $("input[name='colour']:checked").val() + "-" + this.value + ".png");
});