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

我尝试在语义UI中使用带卡片的情态动词。其概念是单击卡上的按钮，并显示带有图像和描述的模态。我有48张卡，每次点击卡都需要不同的图像-->当我点击卡号1时-显示图像编号1，当我点击卡号2时-显示图像编号2，当我点击卡号48时-显示图像编号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> 

$（函数（）{
$（'.ui.modal>.image'）.append（$（'.dimage'））；//它只添加一个图像，但可能有一种方法可以使用此脚本添加其他图像，只需稍加修改
});

这是我的代码摘录：

<!--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-->

$（函数（）{
$（'.center>.ui.inversed.button'）。单击（函数（）{
$（'.ui.modal'）.modal（'show'）；
});
});
显示
休闲食品
蔬菜/水果
显示
休闲食品
蔬菜/水果
显示
休闲食品
蔬菜/水果
显示
休闲食品
蔬菜/水果
情态标题
图像可以出现在左侧
描述可以出现在右侧

请尝试以下代码：。我不得不稍微调整一下你的卡片HTML，因为按钮没有显示出来，但是有了CSS，你可能已经拥有了它，你拥有它的方式应该很好。基本上，我所做的是将模式信息存储在按钮的

数据-

属性上。然后我将在单击事件中获取这些值，并将它们分配给模式中的元素

<!--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-->

$（函数（）{
var modal=$（'#my modal'），//保留对modal的引用
modalImg=$（'#modal img'），//在modal中保留对图像的引用
modalDesc=$（'#modal desc'）；//保留对modal中描述的引用
//给你的按钮一个简单的类参考
$（'.show modal'）。在（'click'，function（）上{
var按钮=$（此按钮）；
modalImg.attr（'src'，button.data（'img'）；
modalDesc.text（按钮数据（'desc'））；
modal.modal（'show'）；
});
});
显示
休闲食品
蔬菜/水果
显示
休闲食品
蔬菜/水果
情态标题

因此您可以单击卡中的按钮。这将启动具有与该卡相关的描述/图像的可重用模式，对吗？描述和图像来自哪里？是的，没错。描述将在div中使用类“meta”（卡片上的文本）或类似的内容。图像也可以在元数据或html数据字段中-卡将使用较小版本的图像“snack12.jpg”，但模态将使用较大版本的“snack12_large.jpg”。