Javascript 带单选按钮的电梯房间

我是一个绝对的编码新手，所以请原谅任何错误提前

我有一个非常简单的手工编码商店，有3种产品：

白色T恤[默认选择] 灰色T恤 海军蓝条纹T恤 用户可以使用单选按钮查看每件T恤的预览，单选按钮使用Javascript更改图像src

然后我尝试使用ElevateToom Jquery插件来允许用户放大所选的预览图像，它使用与缩放图像相同的图像src文件

到目前为止，只要用户单击其中一个单选按钮，我就可以让代码正常工作。但是，在单击单选按钮之前，ElevateToom不会运行-因此，除非用户先选择另一个单选按钮，然后再次选择白色T恤单选按钮，否则默认图像白色T恤不会缩放

下面是相关的Javascript/Jquery：

            function chooseTee() {
            var image_src;

            if (document.getElementById('whiteTee').checked) {
                image_src = "https://s3-eu-west-1.amazonaws.com/lovealetter/white-t-shirt.jpg";

            }else if (document.getElementById('greyTee').checked) {
                image_src = "https://s3-eu-west-1.amazonaws.com/lovealetter/grey-t-shirt.jpg";
            }else{
                image_src = "https://s3-eu-west-1.amazonaws.com/lovealetter/navy-t-shirt.jpg";
            }

            $(document).ready(function() {
            $('#tee').attr('src', image_src);
            $('#tee').data('zoom-image', image_src).elevateZoom({ 
            zoomType: "inner", 
            cursor: "crosshair",
            responsive: "True",
            });
        });
    }

以及相关的HTML：

    <div class="img">
    <img id="tee" src="https://s3-eu-west-1.amazonaws.com/lovealetter/white-t-shirt.jpg" data-zoom-image="https://s3-eu-west-1.amazonaws.com/lovealetter/white-t-shirt.jpg" />
    <div class="colourpicker">
    Available colours:<br>
    <label><input type="radio" name="option" value="white" id="whiteTee" onclick="javascript:chooseTee();" checked />White
    <label><input type="radio" name="option" value="grey" id="greyTee" onclick="javascript:chooseTee();" />Grey
    <label><input type="radio" name="option" value="navy" id="navyTee" onclick="javascript:chooseTee();" />Navy
    </div>
    </div>

如果能听到更简单的方法来做这件事，或者确实是一个解决方案，我将非常感激。提前谢谢

在单击单选按钮之前获取此信息的关键是添加在页面加载后立即执行的代码，如下所示：

Javascript 看起来在加载页面时没有调用的函数中有一些类似的代码。此外，您不需要在页面加载中包含数据“zoom-image”，image\u src，因为这些信息包含在HTML中

为了在使用相同的src时正确地进行缩放，您需要使用CSS将img宽度更改为小于实际图像的宽度

CSS

---

在查看文档之后，它似乎打算与两个单独的图像文件一起使用。您可以将较小的版本作为src，将放大的版本放在数据缩放图像中。

我看不到tee，为什么$document.readyfunction{在choostee中？丢失它…正是我需要的！谢谢！

$(document).ready(function() {
 $("#tee").elevateZoom({
    zoomType: "inner",
    cursor: "crosshair",
    responsive: "True",
  });
});

#tee {
  width: 400px;
}