Изменить изображение с помощью выбора в списке переключателей

Добро пожаловать в прекрасный мир ASP.net Web Forms Name/ID Mangling.

Обновить

Поразив, что вы используете тег изображения asp.net. Обратите внимание, что вам не нужно использовать элемент управления asp.net для изображения, в котором вы могли бы использовать простой старый 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. <%= %> - короткая рука для <% Response.Write()%>. Если вы просмотрите исходный код страницы, вы увидите идентификатор клиента ASP.net элементов управления списком радио и кнопок управления в селекторах jQuery.

Вы также должны использовать инструмент, например FireBug для инструментов разработчика 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 ему идентификатор:

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

используйте этот 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>

Проблема, с которой вы сталкиваетесь, заключается в том, что вы не присваиваете значение URI изображения тегу <img>. Поэтому вам нужно добавить что-то к нижней части своей функции, чтобы выполнить это задание. Поскольку у вас нет этого HTML в вашем вопросе, я напишу свой ответ с предположением, что у вас есть тэг в вашем коде как таковой: <img id="changingImage" src="" alt=""/>.

Поэтому просто добавьте это в свой Javascript до того, как ваша функция закроется:

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

Это должно заставить его изменить файл для вас, подумал, что вам может понадобиться изменить папку в вашей конфигурации.