Question

单击相应的单选按钮时，我必须更改3张图像。这些图像被称为spaghetti.jpg，salade.jpg和cremeglacee.jpg。它们位于名为images的文件夹中。

到目前为止，这就是我所拥有的并且无法正常工作。打开页面时会加载第一张图片（spaghetti.jpg），但是当我点击单选按钮时，图像不会改变。

string querySql = "Select Name,Father_name,NIC_No,Image from Admform WHERE Member_ID=@memid";.

using (SqlConnection conSql = new SqlConnection("ConnectionString"))
{
    using (SqlCommand command = new SqlCommand(querySql , conSql ))
    {
        conSql.Open();
        command.Parameters.AddWithValue("@memid", textBoxmember.Text);
        SqlDataReader reader= command.ExecuteReader();
        while(reader.Read())
        {
              // Access your values here
        }  
    }
}

Answer 1

$(document).ready(function(){
        $("input:radio[name=demo]").click(function() {
            var value = $(this).val();
            var image_name;
            if(value == 'spaghetti'){
                image_name = "images/spaghetti.jpg";
            }else{
                if(value == 'salade'){
                    image_name = "images/salade.jpg";
                }else{
                    image_name = "images/cremeglacee.jpg";
                }
            }
             $('#imgS').attr('src', image_name);
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="images/spaghetti.jpg" alt="spaghetti" name="Spaghetti" id="imgS"/>

Spaghetti <input type="radio" name="demo" value="spaghetti"/> <br>
Salade <input type="radio" name="demo" value="salade"/> <br>
Cr&egrave;me glac&eacute;e <input type="radio" name="demo" value="cremeglacee"/> <br> <br>

使用JQUERY，您可以非常轻松地完成此操作，请查看上面的代码段。当用户点击输入时，它会检查单选按钮的值，然后根据它将图像的src属性更改为相应的图像。

马特

用于更改图像的单选按钮（Javascript / HTML）

1 个答案: