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

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

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

我能够让它只与一个变量一起工作，代码如下：

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

$（文档）.ready（函数（）{
$（“输入：radio[name=extcolor]”）。单击（函数（）{
var color=$（this.val（）；
var图像名称；
image_name=（“/new inventory stock images///configurations/base cars/“+color+”_exl_34FRONT.png”）；
$（'buildyourown'）.attr（'src'，image\u name）；
});
});

但是，当我尝试添加第二个变量时，如下图所示，这就是问题所在。我似乎无法让javascript读取trimlevel单选按钮中的data trim data属性，我认为我的函数设置不正确，无法同时工作，但我一生都不知道如何设置它，使两者都能工作。有人能给我指出正确的方向吗

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

$（文档）.ready（函数（）{
$（“输入：收音机[name=trimlevel]”）。单击（函数（）{
var trimlevel=$（this.attr（dataset.trim）；
}
$（“输入：radio[name=extcolor]”）。单击（函数（）{
var color=$（this.val（）；
var图像名称；
image_name=（“/new inventory stock images///configurations/base cars//“+color+”“+trimlevel+”34FRONT.png”）；
$（'buildyourown'）.attr（'src'，image\u name）；
});
});

---

您的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);
    });
});

$（文档）.ready（函数（）{
var trimlevel；//在这两个函数之外声明变量。
$（“输入：收音机[name=trimlevel]”）。单击（函数（）{
trimlevel=$（this）.data（“trim”）；//然后可以在此处分配变量。
});
$（“输入：radio[name=extcolor]”）。单击（函数（）{
var color=$（this.val（）；
var image_name=“/new inventory stock images///configurations/base cars//”+color+“”+trimlevel+“_34FRONT.png”；
$（'buildyourown'）.attr（'src'，image\u name）；
});
});

您需要使用

$（this）.data（'trim'）

谢谢您的回答！您所说的绝对有道理，但是，由于某些原因，图像仍然没有被传递到html图像src。它只是保持为“default image.png”@Josh979很遗憾，我无法重新创建您的问题。这是一个JSFIDLE，显示正确设置和检索图像源：我找到了问题。需要在您发布的代码第6行的“}”后面添加一个右括号。现在它工作得很好！感谢您的帮助！@Josh979哦，哇！抱歉！

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

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