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");
});

Javascript / jQuery UI：根据当前的img src从一组图像中更改元素img src

3 个答案: