使用单选按钮列表中的选择更改图像

本文关键字：选择 图像 单选按钮 列表 | 更新日期: 2023-09-27 18:00:29

我有一个项目，它让我有点纠结于如何以我想要的方式进行。在ASP.net的一个页面上，我有一个表格，它使用单选列表作为选择选项。此外，我在类别右侧有图像，当选择特定的单选值时，我想更改这些图像。

我已经研究了如何使用常规单选按钮控件来实现这一点，但我似乎无法克服困难，因为我正在使用ASP RadioList控件，我需要关于为什么我无法使用以下代码更改图像的指导：

<script type='text/javascript'>
$(document).ready(function () {
    $("input:radio[name=option]").click(function () {
        var value = $(this).val();
        var image_name;
        if (value == 'AMD') {
            image_name = "AMD_CPU_1.jpg";
        } else {
            if (value == 'Intel') {
                image_name = "Intel_CPU_2.jpg";
            } else {
                image_name = "Icon_CPU.jpg";
            }
        }
    });
});
</script>

我在这里使用的是J-Query，我的页面在加载时不会爆炸——但当我选择一个值时，图像不会改变。至于代码的[name=option] 部分，我在HTML代码源中没有name="option"。。。我有以下内容：

<tr>
    <td><input id="MainContent_CPUBuilderForm1_radCPUType_0" type="radio" name="ctl00$MainContent$CPUBuilderForm1$radCPUType" value="AMD" /><label for="MainContent_CPUBuilderForm1_radCPUType_0">AMD</label></td>
</tr>

其中name="ctl00$MainContent$CPUBuilderForm1$radCPUType"。

我试着插入这个作为"选项"的替代，但仍然没有骰子。有人能帮我评估一下我做错了什么吗？万分感谢！干杯

使用单选按钮列表中的选择更改图像

您遇到的问题是没有将图像URI的值分配给<img>标记。所以你需要在函数的底部添加一些东西来进行赋值。由于您的问题中没有HTML，我将在编写答案时假设您的代码中有一个标记：<img id="changingImage" src="" alt="" />。

因此，只需在函数关闭之前将其添加到Javascript中即可：

$('#changingImage').attr('src', '../Images/' + image_name);

这应该可以让它为你更改文件，考虑到你可能需要根据你的配置更改它所在的文件夹。

使用此HTML

<div>
        <asp:RadioButtonList ID="RadioButtonTipoUser" runat="server" RepeatDirection="Horizontal">
            <asp:ListItem Selected="true" Value="1">Dome</asp:ListItem>
            <asp:ListItem Value="amd">Emp</asp:ListItem>
            <asp:ListItem Value="intel">intel</asp:ListItem>
        </asp:RadioButtonList>
        <asp:Image ID="img" runat="server"  ImageUrl="~/Desert.jpg" />

    </div>

查询

 $(document).ready(function () {

        $('#RadioButtonTipoUser_1').on('change', function () {
            if ($(this).is(':checked')) {
                $('#img').attr('src', 'Chrysanthemum.jpg');
            }
        });
        $('#RadioButtonTipoUser_2').on('change', function () {
            if ($(this).is(':checked')) {
                $('#img').attr('src', 'Desert.jpg');
            }
        });
    });

</script>

欢迎来到ASP.net Web Forms Name/ID Mangling的奇妙世界。

更新

已经确定您正在使用asp.net图像标记。请注意，您不必对图像使用asp.net控件，您可以使用带有ID的普通旧HTML控件；这个身份证不会被篡改。不过，我现在还是坚持使用asp.net图像控件。

这需要您的脚本在页面上，而不是在js文件中。

.aspx

<asp:RadioBUttonList ID="yourID" runat="server" />
<asp:Image ID="Image6" runat="server" ImageUrl="~/Images/Icon_CPU.jpg" />

javascript

$(document).ready(function () {
    $("#<%= yourID.ClientID %> input").click(function () {
        var value = $(this).val();
        var image_name;
        var image_path = "/Images/"; 
        //If the images directory isn't at the website root you could use asp.nets
        //resolveURL method instead
        if (value == 'AMD') {
            image_name = "AMD_CPU_1.jpg";
        } else {
            if (value == 'Intel') {
                image_name = "Intel_CPU_2.jpg";
            } else {
                image_name = "Icon_CPU.jpg";
            }
        }
        //console.log(image_name);
         $("#<%= Image6.ClientID %>").attr('src', image_path + image_name);
    });
});

<% %>是一个服务器代码块，应该在aspx页面中谨慎使用。<%= %>是`<%的缩写回答写入（）%>。如果你查看页面的源代码，你会看到单选按钮列表的ASP.net客户端ID；jQuery选择器中的图像控件。

如果出现意外结果，您还应该使用FireBug for Firefox或Chrome开发工具等工具，在单击复选框后检查图像的路径。还要注意行//console.log(image_name);。从此行中删除注释将把image_name的值转储到控制台，这对调试很有用。点击此处查看更多信息：http://blogs.msdn.com/b/cdndevs/archive/2011/05/26/console-log-say-goodbye-to-javascript-alerts-for-debugging.aspx

下面的上一个代码-不涉及更新图像

一个巧妙的解决方案是用div或更好的fieldset包围你的单选按钮列表，并给它一个id:

<div id="listContainer">
    <asp:RadioButtonList ID="yourID" runat="server" />
<div>

现在将您的javascript更新为

$(document).ready(function () {
    $("#listContainer input").click(function () {
        var value = $(this).val();
        var image_name;
        if (value == 'AMD') {
            image_name = "AMD_CPU_1.jpg";
        } else {
            if (value == 'Intel') {
                image_name = "Intel_CPU_2.jpg";
            } else {
                image_name = "Icon_CPU.jpg";
            }
        }           
    });
});
相关文章：