Question

我有一个页面，其中有许多单选按钮，在调用fancybox时会隐藏并显示。

这是我的js代码，用于在触发时将内容调用到fancybox。

 $("#serviceType").change(function() {
    var selectedOption_ID = $("#serviceType option:selected").attr("value");
    if (selectedOption_ID == "7"){
      $.fancybox({
        'content': $("#advancedInspection").html()
      });
    }
  });

#advancedInspection中的一些代码：

<div id="advancedInspection" style="display:none;">
    <h3>TITLE</h3>
    <table cellpadding="2" cellspacing="2" width="900">
        <tr style="text-align:left">
            <td>DEVANT</td>
            <td>Oui <input type="radio" name="tlDevant1" value="yes"/></td>
            <td>Non <input type="radio" name="tlDevant1" value="no"/></td>
            <td>DEVANT</td>
            <td>Oui <input type="radio" name="tlDevant2" value="yes"/></td>
            <td>Non <input type="radio" name="tlDevant2" value="no"/></td>
        </tr>
        <tr style="text-align:left">
            <td>DOS</td>
            <td>Oui <input type="radio" name="tlDos1" value="yes"/></td>
            <td>Non <input type="radio" name="tlDos1" value="no"/></td>
            <td>DOS</td>
            <td>Oui <input type="radio" name="tlDos2" value="yes"/></td>
            <td>Non <input type="radio" name="tlDos2" value="no"/></td>
        </tr>
        <tr style="text-align:left">
            <td>HAUT DE DOS</td>
            <td>Oui <input type="radio" name="tlHautDos" value="yes"/></td>
            <td>Non <input type="radio" name="tlHautDos" value="no"/></td>
            <td>TAILLE</td>
            <td>Oui <input type="radio" name="tlTaille" value="yes"/></td>
            <td>Non <input type="radio" name="tlTaille" value="no"/></td>
        </tr>
....
   </table>
</div>

一切都运行正常，但是当我关闭那个花式框并再次回拨时，所有选中的单选按钮都消失了。我需要1比1重新检查它们。

有没有办法使用Fancybox加载页面的DIV并保留你的修改？

请注意，＃serviceType是一个包含所有选项的下拉菜单。当选择id为＃7的选项时，它会使用#advancedInspection的内容触发fancybox。

Answer 1

您可以向onComplete和onCleanup回调添加函数，以分别恢复和保存输入值。这是a demo和代码：

var form = $("#advancedInspection"),
    inputs = form.find('input'),
    saveValues = function() {
        $('#fancybox-content input').each(function(i) {
            inputs.eq(i).attr('checked', this.checked);
        });
    },
    restoreValues = function() {
        $('#fancybox-content input').each(function(i) {
            this.checked = inputs.eq(i).is(':checked');
        });
    };

$('button').click(function() {
    $.fancybox({
        'content': form.html(),
        onComplete: restoreValues,
        onCleanup: saveValues
    });
});

如何在回调中保留fancybox内容？

1 个答案: