Question

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

我是一个非常初学者，我想知道是否有可能在这种情况下使用带有.each（）的.append（）？像这样：

<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-属性上。然后我在click事件中获取这些值并将它们分配给模态中的元素。

<!--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中使用模态自动获取不同的图像？

1 个答案: