如何將變量傳遞給動態UIkit模式？

的按鈕：

<button type="button" class="uk-button" data-uk-modal="{target:'#info',center:true}" data-added="added-test" data-modified="modified-test"><i class="uk-icon-info"></i></button>

模態：

<div class="uk-modal" id="info"> 
    <div class="uk-modal-dialog"> 
     <h4 style="margin-bottom:5px;">Added:</h4> 
     <div id="added"></div><br> 
     <h4 style="margin-bottom:5px;">Modified:</h4>  
     <div id="modified"></div> 
     <div class="uk-modal-footer"> 
      <button type="button" class="uk-button uk-modal-close">Close</button>   
     </div> 
    </div> 
</div>

腳本：

$(document).ready(function() { 
    $('#info').on('uk.modal.show', function (event) { 
     var button = $(event.relatedTarget); 
     var added = button.data('added'); 
     var modified = $(e.target).data('modified'); 
     var modal = $(this); 
     modal.find('.uk-modal-dialog #added').text(added); 
     modal.find('.uk-modal-dialog #modified').text(modified); 
    }); 
});

這是行不通的。我在控制檯中沒有出現錯誤。我已經嘗試了其他幾種方法，但是他們都沒有像他們應該那樣工作。

更新＃1

以下jQuery的原理部分。我已將ID「infotrigger」添加到按鈕。

jQuery('#info').appendTo("body"); 
jQuery(document).on('click', '#infotrigger', infomodal_handler); 
function infomodal_handler(e) 
{ 
    var added = jQuery(e.target).data('added'); 
    var modified = jQuery(e.target).data('modified'); 
    jQuery('#info').on({ 
     'show.uk.modal':function(){ 
      jQuery('#added', jQuery(this)).text(added); 
      jQuery('#modified', jQuery(this)).text(modified); 
     } 
    }).trigger('show.uk.modal'); 
}

現在的問題是，它只是部分工作。我認爲原因是該按鈕在foreach循環中。當打開模式時，大多數情況下我都有舊數據。如果我再次打開它，我主要是正確的數據。

任何想法如何解決這個問題？

來源

2016-11-06 wassereimer

問題是，有時圖標被按下，而不是按鈕本身。所以數據不能被提取。

var added = jQuery(e.target).data('added');

到：要解決這個問題的變量需要從改變

var added = jQuery(this).data('added');

現在正確的DOM元素是目標。

要在循環內使用模態，我改變了一切。從來就把與所述腳本轉換成一個功能模態，其中i通過傳遞元件-id和其應用到不同的元素：

function info_modal($id) { 
    return " 
    <script> 
    jQuery('#info" . $id . "').appendTo('body'); 
    jQuery(document).on('click', '#infotrigger" . $id . "', infomodal_handler" . $id . "); 
    function infomodal_handler" . $id . "(e) 
    { 
     console.log(e); 
     var added" . $id . " = jQuery(this).data('added" . $id . "'); 
     var modified" . $id . " = jQuery(this).data('modified" . $id . "'); 
     jQuery('#info" . $id . "').on({ 
      'show.uk.modal':function(){ 
       jQuery('#added" . $id . "', jQuery(this)).text(added" . $id . "); 
       jQuery('#modified" . $id . "', jQuery(this)).text(modified" . $id . "); 
      } 
     }).trigger('show.uk.modal'); 
    } 
    </script> 

    <!-- Info Modal --> 
    <div class='uk-modal' id='info" . $id . "'> 
     <div class='uk-modal-dialog'> 
      <h4 style='margin-bottom:5px;'>" . __('Added on', 'easy-code-placement') . ":</h4> 
      <div id='added" . $id . "'></div><br> 
      <h4 style='margin-bottom:5px;'>" . __('Last Modified on', 'easy-code-placement') . ":</h4>  
      <div id='modified" . $id . "'></div> 
      <div class='uk-modal-footer uk-text-right'> 
       <button type='button' class='uk-button uk-modal-close'>" . __('Close', 'easy-code-placement') . "</button>   
      </div> 
     </div> 
    </div> 
    "; 
}

在循環內部從來就放置在按鈕和也適用於元件ID到它後，我稱之爲功能（該功能只是爲了更好的代碼可讀性 - 腳本和模態當然也可以直接放置在循環內部）：

來源

2016-11-06 17:36:16 wassereimer

如何將變量傳遞給動態UIkit模式？

回答

相關問題