Question

我正在尝试根据4个不同的单选按钮选择显示图像，这些按钮有2个不同的名称。

例如，第一组单选按钮应选择产品型号（两个选项），第二组单选按钮选择颜色（两个选项）。

以下是单选按钮：

 <img src="Rack-BK.jpg" name="formula" id="formula">

<br>
<input type="radio" name="model" value="Rack" id="rack_option">Rack 
<input type="radio" name="model" value="NoRack" id="norack_option" >NoRack
<br><br>
<input type="radio" name="color" value="Black" id="black_option" > Black
<input type="radio" name="color" value="Gray" id="gray_option" > Gray

这是有效的，但只能选择模型，但我也需要添加颜色。

<script type='text/javascript'>
$(document).ready(function(){
    $("input:radio[name=model]").click(function() {
        var value = $(this).val();
        var image_name;
        if(value == 'Rack'){
            image_name = "Rack-BK.jpg";
        }else{
            if(value == 'NoRack'){
                image_name = "Without-Rack-BK.jpg";

            }
        }
         $('#formula').attr('src', image_name);
    });
});

这是我尝试过的但不起作用：

    <script type='text/javascript'>
        $(document).ready(function(){
        $("input:radio[name=model]").click(function() 
    $("input:radio[name=color]").click(function() 


{
            var value = $(this).val();
        var image_name;


        if(value == 'Rack')

    { 
        if (value == 'Gray')
        {
            image_name = "Rack-GY.jpg";
        }


            image_name = "Rack-BK.jpg";
    }


        }else{

            if(value == 'NoRack')
    {
        if (value =='Gray'
        {
                    image_name = "Without-Rack-GY.jpg";
        }

    image_name = "Without-Rack-BK.jpg";

            }
 }
                $('#formula').attr('src', image_name);
    });
});

Answer 1

在这种情况下，使用switch语句和'checked'选择器的组合似乎很有用。

我会把事件处理程序放在两个无线电组上......在这种情况下输入：radio [name = model]和input：radio [name = color]（如果你有任何其他单选按钮，则明确定义）页面）。

然后，在处理程序内部获取每个组的当前选定值，并在switch语句内部进行处理（更适合处理大量if / else样式的检查，当您只是查看值时该项目）。这意味着如果您添加更多选项，例如蓝色，黄色等，则可以更轻松地插入并处理这些情况。

TL; DR：你可以这样做：

$("input:radio[name=model], input:radio[name=color]").click(function() { // This handler runs when any of the radio buttons are clicked.
    var modelValue = $("input:radio[name=model]:checked").val(); // Find which model radio button is checked.
    var colorValue = $("input:radio[name=color]:checked").val(); // Find which color radio button is checked.

    var image_name = ""; // Initialize the image name to blank. We will be appending as we go.

    switch (modelValue) {
        case 'Rack':
            image_name += "Rack"; // Rack was selected, so use that value for the first part of the image.
            break;
        case 'NoRack':
            image_name += "Without-Rack"; // No Rack was selected, so use that value for the first part of the image.
            break;
        default:
            image_name += "Rack"; // Make sure there is a default value, or a broken image could occur!
            break;
    }

    switch (colorValue) {
        case 'Black':
            image_name += "-BK.jpg"; // Black was selected, so use that value for the last part of the image.
            break;
        case 'Gray':
            image_name += "-GY.jpg"; // Gray was selected, so use that value for the last part of the image.
            break;
        default:
            image_name += "-BK.jpg"; // Make sure there is a default value, or a broken image could occur!
            break;
    }

    $('#formula').attr('src', image_name); // Put the image value in the formula image field src.
});

根据两个输入单选按钮显示图像

1 个答案: