Question

如何将变量传递到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循环中。打开模态时，我大多数时候都有旧数据。如果我再次打开它，我主要有正确的数据。

任何想法如何解决？

Answer 1

问题在于有时图标被按下而不是按钮本身。因此无法获取数据。要解决此问题，需要更改变量：

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

为：

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

现在正确的dom元素是目标。

要在循环中使用模态我改变了一切。我把带有脚本的模态放到一个函数中，我传递了元素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应用于它，之后我调用了函数（该函数仅用于更好的代码可读性 - 脚本和模态当然也可以直接放在循环中）：

<button type="button" id="infotrigger<?php echo $code->id; ?>" class="uk-button" data-uk-modal="{target:'#info<?php echo $code->id; ?>',center:true}" data-added<?php echo $code->id; ?>="added" data-modified<?php echo $code->id; ?>="modified"><i class="uk-icon-info"></i></button>
<?php echo info_modal( $code->id ); ?>

如何将变量传递到动态UIkit模式？

1 个答案: