单击按钮时更新图像源答案

【问题标题】：Update image source on button click单击按钮时更新图像源
【发布时间】：2021-01-03 16:13:31
【问题描述】：

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

这是我的 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, Arial, Helvetica, 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, Arial, Helvetica, 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, Arial, Helvetica, 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, Arial, Helvetica, 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, Arial, Helvetica, 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();
  }); 
});

非常感谢您的回复！

【问题讨论】：

标签： javascript html jquery text textbox

【解决方案1】：

由于您已经在使用 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>

【讨论】：