javascript - Featherlight 在关闭时隐藏 div

Question

我正在尝试创建一个包含提交数据的预览屏幕，并将其显示在 Featherlight Lightbox 中。

我有以下示例代码。

jQuery(document).ready(function() {

//Triggle when Preview Button is Clicked.
jQuery('.OpenLightBox').off('click').on('click', function( e ) {

    var pa_firstname=   jQuery('input[name="pa-[name_first]"]').val();
    var pa_lastname=    jQuery('input[name="pa-[name_last]"]').val();
    if (pa_firstname == null || pa_firstname == '') {
        alert('Cannot be empty');
        return false;
    } else {

    jQuery('.LightBox').empty();
    jQuery('.LightBox').append('First Name in Ajax is' + pa_firstname + ' And Last Name in Ajax is ' + pa_lastname);

            //alert('done');

    }

    jQuery.ajax({
        url : padvisor_ajax.ajax_url,

        type : 'POST',
        dataType: 'json',
        data : {
            action: 'padvisor_test_ajaxcall_lightbox',
            pa_first_name: pa_firstname,
            pa_last_name: pa_lastname
        },
        success: function (data) {
            jQuery.featherlight(jQuery('.LightBox'), {});
            jQuery('.LightBox').toggle();

        }

    });

    return false;

}); 

然后我有以下 html 代码来创建 2 个字段，一个提交按钮和一个预览按钮:

<form id="pd_test">
<span id="pa-[name_first]" class="pa_name_first"><label for="pa_name_first" >First Name</label>
<input type="text" name="pa-[name_first]" id="pa-[name_first]" value=""/>
</span>';
<span id="pa-[name_last]" class="pa_name_last"><label for="pa_name_last" >Last Name</label><input type="text" name="pa-[name_last]" id="pa-[name_last]" value=""/></span>
<button type="submit" value="Submit">Send Now</button>

<button value="preview" class="OpenLightBox">Preview</button></form>
<div class="LightBox" style="width: 300px; height: 60px; display:none;">This is the content, let the content dwell here</div>

当我使用 .toggle 时，我可以用我的 DIV 显示到 Featherlight 框，但是我无法理解如何隐藏 <div>当我关闭羽毛灯箱时。

谁能指导我如何在featherlight框关闭时隐藏DIV，并让我知道这是否是正确的方法？

我的目标...从表单字段收集输入，通过ajax发送到php来处理它，成功后，显示在预览灯框中，其中我可以有一个关闭按钮和一个提交按钮。关闭按钮可以关闭它，但是提交按钮将与表单提交按钮具有相同的功能。

问题 1:我需要在羽毛灯关闭时切换“隐藏”。

问题2:当featherlight灯箱现在关闭时，我再次单击预览按钮，DIV仅调用空，但它不会调用.append来放入值。

Answer 1

您需要将内容正确地传递给featherlight，并且也不需要切换元素，因为featherlight会在关闭事件上执行此操作。

HTML

<span id="pa-name_first" class="pa_name_first"><label for="pa_name_first" >First Name</label>
   <input type="text" name="pa-name_first" id="pa-name_first" value=""/>
</span>
<span id="pa-name_last" class="pa_name_last"><label for="pa_name_last" >Last Name</label><input type="text" name="pa-name_last" id="pa-name_last" value=""/></span>
<button type="submit" value="Submit">Send Now</button>
<button type="button" class="OpenLightBox">Preview</button>
<div class="LightBox" style="width: 300px; height: 60px; display:none;">
  <span id="content"></span>
</div>

jQuery

//Triggle when Preview Button is Clicked.
jQuery('.OpenLightBox').off('click').on('click', function( e ) {

   var pa_firstname=   jQuery('input[name="pa-name_first"]').val();
   var pa_lastname=    jQuery('input[name="pa-name_last"]').val();
   if (pa_firstname == null || pa_firstname == '') {
       alert('Cannot be empty');
       return false;
   } else {
       var content = 'First Name in Ajax is' + pa_firstname + ' And Last Name in Ajax is ' + pa_lastname+'';
       jQuery('#content').html("");
       jQuery('#content').html(content);
       jQuery.featherlight('#content', {});
   }
});

工作中的 JSFiddle: https://jsfiddle.net/rdawkins/9vktzw88/