Javascript 将公共图像显示到多个div

我正在创建一个html页面，使用jquery在两个不同的div中动态显示相同的图像

以下是我的代码：

HTML文件：-

<div id="body" style="">
   <table>
       <tr>
         <td>
            <div class="">
                <hr style="" />
                <div id="ablumDisplayPhotos">
                    <input type="button" class="albumButton" value="My Albums" name="button" id="btnjoin">

                    <a data-toggle="modal" data-target="#commentDiv" style="cursor:pointer;">

                  //First image declared here// (Success)

                    <img id="imgdisplay" src="~/Images/Bracelets-Jewelry.jpg" style="" />

                 </a>

                 </div>
             </div
             <div class="">
                    <hr style="" />
                /// image changes in above div according to user from here
                    <ul class="">
                        <li><img src="~/Images/Bracelets-Jewelry.jpg" width="100" height="100" id="imgBracelets"></li>
                        <li><img src="~/Images/mens-gold-bracelet.jpg" width="100" height="100" id="gold-bracelet"></li>
                        <li><img src="~/Images/peacock-moti_photo.jpg" width="100" height="100" id="moti_photo"></li>
                        <li><img src="~/Images/ring123.jpg" width="100" height="100" class="ring123"></li>
                    </ul>
                </div>
            </div>
        </td>
     </tr>
   </table>
 </div>
 <div class="modal fade" id="commentDiv" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">Comments</h4>
         </div>
         <div class="modal-body" style="height: 495px;">
           ////Same Image should be displayed here//// (Failed)
         <img id="imgdisplay" src="~/Images/Bracelets-Jewelry.jpg" style="" />
         </div>
       </div>
    </div>
</div>

//此处声明的第一个图像//（成功）
出现语法错误，请用以下代码替换您的代码

$('#imgBracelets').on({
        'click', function () {
            $('#imgdisp').attr('src', '../../Images/Bracelets-Jewelry.jpg');
        }
    });
    $('#gold-bracelet').on({
        'click', function () {
            $('#imgdisplay').attr('src', '../../Images/mens-gold-bracelet.jpg');
        }
    });
    $('#moti_photo').on({
        'click', function () {
            $('#imgdisplay').attr('src', '../../Images/peacock-moti_photo.jpg');
        }
    });
    $('#ring123').on({
        'click', function () {
            $('#imgdisplay').attr('src', '../../Images/ring123.jpg');
        }
    });

在
'click'
之后需要一个逗号，可以删除括号：
$（）。on（'click'，function（）{}）您有多个具有相同ID的标记--这是无效的HTML。此外，将所有处理程序附件包装在
$（document）.ready
处理程序中也是一种好做法。您的div
ablumDisplayPhotos
未关闭。另外：不要将表格用于布局：）谢谢您的建议：）@BettySt No，OP's
。on
使用就可以了。您可以对一个普通对象使用
.on
，其中键是事件名称，值是处理程序
$('#imgBracelets').on({
        'click', function () {
            $('#imgdisp').attr('src', '../../Images/Bracelets-Jewelry.jpg');
        }
    });
    $('#gold-bracelet').on({
        'click', function () {
            $('#imgdisplay').attr('src', '../../Images/mens-gold-bracelet.jpg');
        }
    });
    $('#moti_photo').on({
        'click', function () {
            $('#imgdisplay').attr('src', '../../Images/peacock-moti_photo.jpg');
        }
    });
    $('#ring123').on({
        'click', function () {
            $('#imgdisplay').attr('src', '../../Images/ring123.jpg');
        }
    });