如何设置图像以根据两个不同的单选按钮更改源？

Question

我开始很好地理解 PHP，但是，Javascript 对我来说仍然很陌生。我正在尝试根据两个单选按钮的选择使用 Javascript 更改图像。

我的单选按钮如下（一个来自彩色单选按钮集，一个来自trim级别单选按钮集）：

<input name="extcolor" type="radio" id="extcolor2'" value="Obsidian Blue Pearl" />
<input name="trimlevel" data-trim="exl" type="radio" value="2016 Honda Odyssey EX-L" />

我能够使用此代码使其仅与一个变量一起工作：

<script type='text/javascript'>
$(document).ready(function(){
    $("input:radio[name=extcolor]").click(function() {
        var color = $(this).val();
        var image_name;
            image_name = ("/new-inventory-stock-images/<?=$VehicleYear?>/<?=$VehicleModel?>/configurations/base-cars/"+color+"_exl_34FRONT.png");
         $('#buildyourown').attr('src', image_name);
    });
});

<img src="default-image.png" name="buildyourown" id="buildyourown">

但是，当我尝试添加第二个变量时，如下所示，这就是问题发生的地方。我似乎无法 javascript 读取 trim 级单选按钮中的 data-trim 数据属性，而且我认为我的功能设置不正确，无法在同时，但我终生无法弄清楚如何设置它以便两者都能正常工作。有人能指出我正确的方向吗？

<script type='text/javascript'>
$(document).ready(function(){
    $("input:radio[name=trimlevel]").click(function() {
        var trimlevel =$(this).attr(dataset.trim); 
        }

    $("input:radio[name=extcolor]").click(function() {
        var color = $(this).val();

        var image_name;
            image_name = ("/new-inventory-stock-images/<?=$VehicleYear?>/<?=$VehicleModel?>/configurations/base-cars/"+color+"_"+trimlevel+"_34FRONT.png");
         $('#buildyourown').attr('src', image_name);
    });
});

<img src="default-image.png" name="buildyourown" id="buildyourown">

Answer 1

您的 trimlevel 变量是在本地范围内声明的，因此不能从 extcolor click 函数中使用。您需要将声明拉到两个函数都可以到达的范围内：

$(document).ready(function(){
    var trimlevel; // Variable gets declared here, outside of both functions.

    $("input:radio[name=trimlevel]").click(function() {
        trimlevel = $(this).data("trim"); // Then you can assign the variable here.
    });

    $("input:radio[name=extcolor]").click(function() {
        var color = $(this).val();

        var image_name = "/new-inventory-stock-images/<?=$VehicleYear?>/<?=$VehicleModel?>/configurations/base-cars/"+color+"_"+trimlevel+"_34FRONT.png";
         $('#buildyourown').attr('src', image_name);
    });
});

如何设置图像以根据两个不同的单选按钮更改源？

How to set an image to change source based off of two different radio buttons?

html

javascript

jquery

html-input