Question

我创建一个html页面，使用jquery在2个不同的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>

JQuery： -

<script>
    $('#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');
        }
    });
</script>

用户单击按钮时，无法在第二个div中显示所需的图像。两个div都必须显示相同的图像。

有人可以指导我或纠正我的错误吗？

Answer 1

语法错误，请使用以下代码替换您的代码。

$('#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');
        }
    });

将公共图像显示为多个div

1 个答案: