羽灯近距离隐藏div

Question

我试图创建一个预览屏幕与提交的数据，并显示在羽毛光灯箱。

我有以下示例代码。

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代码来创建两个字段，一个提交按钮和一个预览按钮：

<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显示羽毛灯盒，但是当我关闭羽毛灯盒时，我无法理解如何隐藏<div>。

谁能指导我如何隐藏当羽毛灯箱是接近，并让我知道这是否是正确的方式？

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

问题1：当羽毛灯关闭时，我需要切换隐藏。

Problem 2：当轻灯盒关闭，我再次单击预览按钮时，DIV只调用空，但不调用.append来输入值。

Answer 1

您需要将内容正确地传递给羽毛光，并且也不需要切换元素，因为在关闭事件时，羽毛光会这样做。

<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/