如何在语义 UI 中使用模态自动获取不同的图像？

Question

我正在尝试在语义 UI 中使用带有卡片的模式。这个概念是单击卡片上的按钮并显示带有图像和描述的模态。我有 48 张卡片，每次点击卡片都需要不同的图像 --> 当我点击卡片 1 时 - 它显示图像编号 1，当我点击卡片编号 2 - 它显示图像编号 2，当我点击卡号 48 - 它显示图像 nr 48 等。如何自动从卡片中获取每张图片？

我是这方面的新手，我想知道在这种情况下是否可以将 .append() 与 .each() 一起使用？像这样：

<script>
$(function(){
   $('.ui.modal > .image').append($('.dimage')); //it adds only one image, but maybe there's a way to adds other ones using this script                                                                                                          with minor modifications        
});
</script>

这是我的代码的摘录：

<!--head-->
<script>
$(function(){
   $('.center > .ui.inverted.button').click(function(){
      $('.ui.modal').modal('show');         
   });
});
</script>

<!-- my body-->    
<div class="ui basic container">
   <div class="ui four doubling special cards">

      <div class="card">
         <div class="blurring dimmable image">
            <div class="ui dimmer">
               <div class="content">
                  <div class="center">
                     <div class="ui inverted button">Show</div>
                  </div>
               </div>
            </div><!--ui dimmer-->
            <img src="images/snacks/snack9.jpg">
         </div>
         <div class="content">
            <a class="header">Snacks</a>
            <div class="meta">
               <span class="date">veggie/fruity</span>
            </div>
         </div>
      </div><!--card-->

      <div class="card">
         <div class="blurring dimmable image">
            <div class="ui dimmer">
               <div class="content">
                  <div class="center">
                     <div class="ui inverted button">Show</div>
                  </div>
               </div>
            </div><!--ui dimmer-->
            <img src="images/snacks/snack10.jpg">
         </div>
         <div class="content">
            <a class="header">Snacks</a>
            <div class="meta">
               <span class="date">veggie/fruity</span>
            </div>
         </div>
      </div><!--card-->

      <div class="card">
         <div class="blurring dimmable image">
            <div class="ui dimmer">
               <div class="content">
                  <div class="center">
                     <div class="ui inverted button">Show</div>
                  </div>
               </div>
            </div><!--ui dimmer-->
            <img src="images/snacks/snack11.jpg">
         </div>
         <div class="content">
            <a class="header">Snacks</a>
            <div class="meta">
               <span class="date">veggie/fruity</span>
            </div>
         </div>
      </div><!--card-->

      <div class="card">
         <div class="blurring dimmable image">
            <div class="ui dimmer">
               <div class="content">
                  <div class="center">
                     <div class="ui inverted button">Show</div>
                  </div>
               </div>
            </div><!--ui dimmer-->
            <img class="dimage" src="images/snacks/snack12.jpg">
         </div>
         <div class="content">
            <a class="header">Snacks</a>
            <div class="meta">
               <span class="date">veggie/fruity</span>
            </div>
         </div>
      </div><!--card-->

   </div><!--ui four doubling special cards-->
       <div class="ui modal">
          <i class="close icon"></i>
          <div class="header">
             Modal Title
          </div>
          <div class="image content">
             <div class="image">
             An image can appear on the left
             </div>
             <div class="description">
                A description can appear on the right
             </div>
          </div>
       </div>
 </div><!--ui basic container-->

Answer 1

试试下面的代码：https://jsfiddle.net/y7nd7qxw/。我不得不稍微调整一下您的卡 HTML，因为该按钮没有显示，但是对于 CSS，您可能拥有它应该没问题。基本上我所做的是将模式信息存储在按钮的 data- 属性上。然后我在点击事件中获取这些值并将它们分配给模态中的元素。

<!--head-->
<script>
$(function() {

    var modal = $('#my-modal'), // hold reference to modal
        modalImg = $('#modal-img'), // hold reference to image in modal
        modalDesc = $('#modal-desc'); // hold reference to description in modal

    //give your button an easier class reference
    $('.show-modal').on('click', function() {
        var button = $(this);

        modalImg.attr('src', button.data('img'));
        modalDesc.text(button.data('desc'));

        modal.modal('show');
    });
});
</script>
<!-- my body-->
<div class="ui basic container">
    <div class="ui four doubling special cards">
        <div class="card">
            <div class="blurring dimmable image">
                <div class="ui inverted button show-modal" data-desc="here is some description" data-img="http://placehold.it/200">Show</div>
                <!--ui dimmer-->
                <img src="images/snacks/snack9.jpg">
            </div>
            <div class="content">
                <a class="header">Snacks</a>
                <div class="meta">
                    <span class="date">veggie/fruity</span>
                </div>
            </div>
        </div>
        <!--card-->

        <div class="card">
            <div class="blurring dimmable image">
                <div class="ui inverted button show-modal" data-desc="some other description description" data-img="http://placehold.it/400">Show</div>
                <!--ui dimmer-->
                <img src="images/snacks/snack9.jpg">
            </div>
            <div class="content">
                <a class="header">Snacks</a>
                <div class="meta">
                    <span class="date">veggie/fruity</span>
                </div>
            </div>
        </div>
        <!--card-->
    </div>
    <!--ui four doubling special cards-->
    <div class="ui modal" id="my-modal">
        <i class="close icon"></i>
        <div class="header">
            Modal Title
        </div>
        <div class="image content">
            <div class="image">
                <img src="" alt="" id="modal-img">
            </div>
            <div class="description">
                <p id="modal-desc"></p>
            </div>
        </div>
    </div>
</div>
<!--ui basic container-->

如何在语义 UI 中使用模态自动获取不同的图像？

How to get automatically different images using modal in Semantic UI?

javascript

jquery

semantic-ui