如何通过点击缩略图按钮修改模态框图片的src属性？

我做了个带并排缩略图按钮的网页，点击缩略图会弹出模态框显示大图和关闭按钮。现在想实现：点击不同缩略图按钮时，模态框里的图片src属性自动切换成对应按钮自定义imgsrc属性的值。自己写的jQuery代码没生效，附上相关代码和一段可用的参考示例。

我的代码 #

缩略图按钮HTML #

<!-- 对应"image 04"的缩略图按钮 -->
<button class="graveyard-btn graveyard-primary"
        data-toggle="modal"
        data-target="#exampleModal"
        imgsrc="http://example.com/wp-content/uploads/04.png">
    <img src="http://example.com/wp-content/uploads/04.png">
</button>

模态框图片默认设置HTML #

<!-- 模态框图片默认显示"image 22" -->
<div class="modal-body">
    <img class="modal-image" 
         src="http://example.com/wp-content/uploads/22.png"
         alt="点击按钮查看大图" />
</div>

无效的jQuery代码 #

<!-- 意图：点击缩略图时，把模态框图片的src改成当前按钮imgsrc属性的值 -->
$('.graveyard-dump span').ready(function click(f) {
       $('.graveyard-dump span').click(function click(f) {
            $('.modal-image').attr('src', $(this).attr("imgsrc"));
    });
});

参考的可用代码示例 #

HTML #

<!-- 带多属性的红色按钮，供jQuery读取并修改页面元素 -->
<span class="redbtn1" 
      picChange="url(http://example.com/wp-content/uploads/Resin-Red.png)" 
      name="Red" 
      color="#ff0000" 
      background1="#ff2400"  
      background2="#ba110c"  
      background3="#90021F"  
      background4="none"
      name1="Scarlet"
      name2="Crimson"
      name3="Burgundy"
      name4="-"
></span>

jQuery #

<!-- 点击按钮时，给当前按钮加active类、移除其他按钮的active类，并批量修改页面元素的属性和内容 -->
$('.changecolor span').ready(function click(f) {
        $('.changecolor span').click(function click(f) {
            $('.changecolor span').removeClass("active");
            $(this).addClass("active");
            $('.pic').css('background-image', $(this).attr("picChange"));
            $('.name').text($(this).attr("name"));
            $('.name').css('color', $(this).attr("color"));
            $('.colorbar-1').css('background', $(this).attr('background1'));
            $('.colorbar-2').css('background', $(this).attr('background2'));
            $('.colorbar-3').css('background', $(this).attr('background3'));
            $('.colorbar-4').css('background', $(this).attr('background4'));
            $('.colorbar-1').text($(this).attr("name1"));
            $('.colorbar-2').text($(this).attr("name2"));
            $('.colorbar-3').text($(this).attr("name3"));
            $('.colorbar-4').text($(this).attr("name4"));
        });
});

你的代码失效主要是选择器不匹配和事件绑定逻辑错误，以下是修正后的实现：

步骤1：修正自定义属性（推荐符合HTML5规范） #

把按钮的imgsrc改成data-imgsrc（自定义属性推荐用data-*前缀，符合标准且jQuery读取更方便）：

<button class="graveyard-btn graveyard-primary"
        data-toggle="modal"
        data-target="#exampleModal"
        data-imgsrc="http://example.com/wp-content/uploads/04.png">
    <img src="http://example.com/wp-content/uploads/04.png">
</button>

步骤2：修正jQuery代码 #

方案1：直接绑定按钮点击事件 #

$(document).ready(function() {
    // 选中所有缩略图按钮绑定点击事件
    $('.graveyard-btn').click(function() {
        // 读取当前按钮的图片地址，修改模态框图片的src
        $('.modal-image').attr('src', $(this).data('imgsrc'));
        // 如果坚持用原imgsrc属性，就改成：$(this).attr('imgsrc')
    });
});

方案2：利用Bootstrap模态框内置事件（更可靠） #

如果用的是Bootstrap模态框，推荐用show.bs.modal事件，避免点击和模态框弹出的时序问题：

$(document).ready(function() {
    // 监听模态框显示前的事件
    $('#exampleModal').on('show.bs.modal', function(event) {
        var triggerBtn = $(event.relatedTarget); // 获取触发模态框的按钮
        var imgUrl = triggerBtn.data('imgsrc'); // 读取按钮上的图片地址
        // 修改模态框内的图片src
        $(this).find('.modal-image').attr('src', imgUrl);
    });
});

内容的提问来源于stack exchange，提问作者silverfish