点击按钮时更新图像源

问题描述

我正在寻找一种方法来响应用户单击包含它的表格来更新图像。

这是我的HTML：

<table width="100%" border="0" id="bottoneM">
    <tr><td width="18%"></td>
        <td>
            <fieldset id="sugg_risp">
                <center>
                    <table border="0" height="100%" width="100%">
                        <tr>
                            <td width="2%" align="center"></td><td width="2%"></td>
                            <td height="100%" width="88%" align="left">
                                <font face="Geneva,Arial,Helvetica,sans-serif">Descrivi il tuo problema</font>
                                </a></td>
                            <td>

                                <IMG SRC="freccia1.gif" name="PHOTO_CHANCE" >

                            </td>
                        </tr>
                    </table>
                </center>
            </fieldset>
        </td>
        <td width="18%"></td>
    </tr><tr><td></td><td>
            <div id="menuM" style="display:none;">
                <table border="0" height="100%" width="100%">
                    <tr>
                        <td width="2%" align="center"></td><td width="2%"></td>
                        <td height="100%" width="88%" align="left">
                            <font face="Geneva,sans-serif">Cosa 1</font>
                            </a></td>
                    </tr>
                    <tr>
                        <td width="2%" align="center"></td><td width="2%"></td>
                        <td height="100%" width="88%" align="left">
                            <font face="Geneva,sans-serif">Cosa 2</font>
                            </a></td>
                    </tr>
                    <tr>
                        <td width="2%" align="center"></td><td width="2%"></td>
                        <td height="100%" width="88%" align="left">
                            <font face="Geneva,sans-serif">Cosa 3</font>
                            </a></td>
                    </tr>
                    <tr>
                        <td width="2%" align="center"></td><td width="2%"></td>
                        <td height="100%" width="88%" align="left">
                            <font face="Geneva,sans-serif">Cosa 4</font>
                            </a></td>
                    </tr>
                    <tr>
                        <td width="2%" align="center"></td><td width="2%"></td>
                        <td height="100%" width="88%" align="left">
                            <font face="Geneva,sans-serif">Cosa 5</font>
                            </a></td>
                    </tr>
                </table>
            </div>
        </td></tr>
    </td>
</table>

当我单击表 id="bottoneM" 时，我想将 "freccia1.gif" 更改为 "freccia2.gif"。

页面使用此 JavaScript/JQuery 来显示列表：

$(document).ready(function(){
  $("#bottoneM").click(function(){
    $("#menuM").slidetoggle();
  }); 
});

非常感谢您的回复！

解决方法

由于您已经在使用 JQuery，因此您可以使用 attr() 更新 src 属性。

$(document).ready(() => {
  const myImage = $('#my-image');
  const urls = [
    'https://placeimg.com/200/200/animals','https://placeimg.com/200/200/people','https://placeimg.com/200/200/arch','https://placeimg.com/200/200/nature','https://placeimg.com/200/200/tech'
  ];
  let i = 0;
  $('#my-button').click(() => {
    if (i < urls.length - 1) i++;
    else i = 0;
    myImage.attr('src',urls[i]);
  });
});

#container {
  display: flex;
  flex-direction: column;
  max-width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <button id="my-button">Refresh</button>
  <img src="https://placeimg.com/200/200/animals" id="my-image" alt="image" />
<div>