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

Question

我有一个项目让我有点不知如何以我想要的方式进行。在一个 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"。

我试图插入这个作为“选项”的替代品，但仍然没有骰子。有人可以帮助评估我在这里做错了什么吗？一百万谢谢！干杯。

Answer 1

您遇到的问题是您没有将图像 URI 的值分配给 <img> 标记。所以你需要在你的函数底部添加一些东西来完成这个任务。由于您的问题中没有该 HTML，我将假设您的代码中有这样的标签：<img id="changingImage" src="" alt="" />。

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

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

这应该让它为您更改文件，认为您可能需要根据您的配置更改它所在的文件夹。

Answer 2

使用这个 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>

JQUERY

 $(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>

Answer 3

欢迎来到 ASP.net Web 表单名称/ID 修改的精彩世界。

更新

确定您使用的是 asp.net 图像标签。请注意，您不必对图像使用 asp.net 控件，而是可以使用带有 ID 的普通旧 HTML 控件；这个ID不会被破坏。不过我现在还是坚持使用 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 页面中应谨慎使用。 <%= %> 是 ` 的简写。如果您查看页面的源代码，您将在 jQuery 选择器中看到单选按钮列表和图像控件的 ASP.net 客户端 ID。

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

下面的先前代码 - 不涉及更新图像

一个 hacky 的解决方案是用 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";
            }
        }           
    });
});