Question

我尝试创建提交数据的预览屏幕，并将其显示在Featherlight灯箱中。

我有以下示例代码。

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

有人可以指导我在羽毛灯箱关闭时如何隐藏DIV，让我知道这是否是正确的方法？

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

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

问题2 ：当羽毛灯箱现在关闭，我再次点击预览按钮时，DIV只调用空，但它没有调用.append来放入值

Answer 1

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

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

Featherlight隐藏div关闭

1 个答案: