如何在語義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-屬性上。然後，我在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-->