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 Forms Name / ID Mangling的精彩世界。

更新

确定您使用的是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页面中谨慎使用。 <%= %>是`＆lt;％Response.Write（）％＆gt;的简写。如果您查看页面的源代码，您将看到单选按钮列表的放大器的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

以下代码 - 不会更新图片

一个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";
            }
        }           
    });
});

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

3 个答案: