Question

我在桌子上有几个图像和单选按钮。我希望图像根据用户点击的单选按钮进行更改。

我可以更改图像。问题是，如果用户点击桌面上的另一个按钮，我就不知道如何更改图像。

下面是我的代码：

function changeImage(){
            var descriptionValue = Math.round( $("input[type='radio']:checked").val());
        switch(descriptionValue)
        {
          case 25:
            $("#twentyfive").attr('src',"/images1.gif");
          break;
          case 30:
            $("#thirty").attr('src',"/images2.gif");
          break;
          case 50:
             $("#fifty").attr('src',"/image3.gif");
          break;
          case 80:
             $("#eighty").attr('src',"/image4.gif");
          break;
        }
    };

HTML

<table  border="0" cellpadding="0" align="center">
    <tr>

        <td height="90">    
            <input type="radio" value="25.00">
            <img id="twentyfive" src="aimage1.gif" />
        <td>    
            <input type="radio"  value="30.00">
            <img  id="thirty"  src="aimage2.gif"  />
        </td>
        <td>    
            <input type="radio" value="50.00">
            <img id="fifty"  src="images3.gif" />
        </td>
    </tr>
    <tr>
        <td colspan="3" align="center">    
            <input type="radio"  value="80.00">
            <img  id="eighty"  src="aimages4.gif" />
        </td>
    </tr>
    </tr>
    </table>

Answer 1

根据您提供的信息，这有点难以辨别。

而不是使用该开关语句，为什么不将图像存储在对象中，如下所示：

var images = [
    {
        value: 25,
        defaultImage: "aimage1.gif",
        newImage: "/images1.gif"
    },
    {
        value: 30,
        defaultImage: "/images2.gif",
        newImage: "/images2.gif"
    }

];

等。等

然后你可以编写一个方法来恢复默认图像并以下列方式将其附加到click事件。

$('table').on('click', function(){
    $('table').children().restoreDefault();
    $(this).changeImage()
});

Answer 2

您需要保存当前图像源，您可以使用data()方法。尝试一下：

function changeImage(){
    $("img").each(function(){
       var originalSrc = $(this).data("initial");
       if(originalSrc)
        $(this).attr("src",originalSrc)
    });
    var descriptionValue = Math.round( $("input[type='radio']:checked").val());
    switch(descriptionValue)
    {
      case 25:
        var src = $("#twentyfive").attr("src");
        $("#twentyfive").data("initial",src).attr('src',"/images1.gif");
      break;
      case 30:
        var src = $("#thirty").attr("src");
        $("#thirty").data("initial",src).attr('src',"/images2.gif");
      break;
      case 50:
         var src = $("#fifty").attr("src");
         $("#fifty").data("initial",src).attr('src',"/image3.gif");
      break;
      case 80:
         var src = $("#eighty").attr("src");
         $("#eighty").data("initial",src).attr('src',"/image4.gif");
      break;
    }
};

点击更改图像

2 个答案: