Jquery 如何根据选择的单选按钮切换两个以上的图像？

我正在使用之前有人建议我使用的jQuery代码，以便根据选择的单选按钮切换可见图像。 第一个图像有一个静态位置，以保持其父高度，后续图像绝对定位并堆叠在第一个图像的顶部，并且彼此堆叠。 如果有两个图像和两个单选按钮，我正在使用的代码工作得很好，但是如果用户决定添加更多图像和单选按钮呢？如何编辑此jQuery代码以使用3、4、5或更多图像和单选按钮

$（“输入[type=radio]”）。更改（函数（）{
$（“.image container img:n类型（2）”）.fadeToggle（“慢”）；
});
.image容器{
位置：相对位置；
边缘底部：30px；
}
.图像容器img{
显示：块；
左边距：自动；
右边距：自动；
}
.图像容器img:非（：类型的第一个）{
位置：绝对位置；
排名：0；
左：50%；
转换：转换（-50%，0）；
}
您可以指定所有以逗号（，）分隔的图像



$（“输入[type=radio]”）。更改（函数（）{
$（“选择器1，选择器2，…）。淡入切换（“慢速”）；
});
向单选按钮添加值属性，如下所示：

    <input id="black" type="radio" checked="checked" name="color" value="1">
    <label for="black" title="black"></label>
    <input id="gray" type="radio" name="color" value="2">
    <label for="gray" title="gray"></label>
    <input id="gray" type="radio" name="color" value="3">
    <label for="gray" title="blue"></label>

在向OP添加代码时，请使用
创建要显示和隐藏的演示，具体取决于单选按钮的含义选择first show first等等？是的，这正是我想要的。我需要一些动态工作的东西，基于用户通过后端向页面添加的图像和输入按钮的数量。
    $(".image-container img:nth-of-type("+this.value+")")