Javascript/jqueryui：根据当前imgsrc从图像数组更改元素imgsrc

我有一个画布元素，其中包含一个图像，最初是一个绿色的正方形。我试图根据两组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:

红色
绿色
蓝色
圆圈
广场

我只能选择颜色了。在选择形状时，我希望更改显示的图像以保留以前选择的颜色（例如，如果当前选择的颜色是红色，用户随后选择的圆圈，则显示的图像将更改为红色圆圈，而不是绿色或蓝色圆圈）。相反，如果用户先选择形状，然后选择颜色，我希望显示的图像保留形状的选择

---

我有一个模糊的想法，解决方案可能是根据当前索引的内容从数组索引中加1或减1，但我不知道如何实现这一点。我对JS比较陌生，所以任何帮助都将不胜感激。谢谢。

这是一个你想要做的事

您需要的功能是

$('#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);
}

}))

---

颜色选择按钮逻辑也不正确，请在那里也使用此逻辑。

这里是一个关于您尝试执行的操作的提示

您需要的功能是

$('#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);
}

}))

---

“颜色选择”按钮逻辑也不正确。请在那里也使用此逻辑。

您可以将图像存储在“图像”对象中，并通过字符串访问它们（例如图像[“RedSquare]”）。我已将它们组合在一起。图像链接已断开，但如果您检查页面，可以看到src正在正确更改

HTML:

---

您可以将图像存储在“images”对象中，并通过字符串（例如images[“RedSquare”]）访问它们。我把它们组合在一起。图像链接已断开，但如果您检查页面，可以看到src正在正确更改

HTML:

---

为什么还要麻烦使用数组/索引并存储它呢

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>

---

为什么还要麻烦使用数组/索引并存储它呢

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>

---

什么是

buttonset（）

？您能提供一个吗？@Rayon buttonset是一个jQuery UI小部件，“为相关按钮提供可视分组”-因此允许将颜色和形状选项分组为两组单选按钮。什么是

buttonset（）

？您能提供一个吗？@Rayon buttonset是一个jQuery UI小部件，“为相关按钮提供可视分组”-因此允许将颜色和形状选项分组为两组单选按钮。谢谢你。小问题是：如果你多次点击其中一个形状选项，即圆形，它会不断从数组索引中减去1，从而在图像中循环。有没有办法防止这种情况发生，这样一旦选择了一个按钮，如果再次单击它，它就不会改变数组索引？谢谢，是的，我注意到了，我已经更新了plunker和这里的代码。您应该使用更改事件来避免这种情况。谢谢。小问题是：如果你多次点击其中一个形状选项，即圆形，它会不断从数组索引中减去1，从而在图像中循环。有没有办法防止这种情况发生，这样一旦选择了一个按钮，如果再次单击它，它就不会改变数组索引？谢谢，是的，我注意到了，我已经更新了plunker和这里的代码。你应该使用change event来避免这种情况。这可能是一个很好的解决方案，但是我检查了fiddle页面，尽管检查了不同的按钮，src根本没有被更改。抱歉，它应该可以工作，但现在不能在我的笔记本上，我会在可能的时候发送一个工作文件@PDTan对等待表示歉意。。我相信图像源没有被更新可能是因为图像无法加载-这里有一个链接到一个工作示例文件：@PDTan Update:可能只是在小提琴中使用了jQuery，而没有导入它！潜在的优雅解决方案，但我检查了小提琴页面，src没有被改变，尽管检查了不同的按钮。抱歉，它应该工作，但现在不在我的笔记本电脑上，当我可以的时候会发送一个工作文件@PDTan对等待表示歉意。。我相信图像源没有被更新可能是因为图像无法加载-这里有一个链接到一个工作示例文件：@PDTan Update:可能只是在小提琴中使用了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);
});

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

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