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

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

本文关键字：获取图像模态语义 UI 更新时间：2023-09-26

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

尝试以下代码：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-->