jquery显示和隐藏div问题答案

【问题标题】：jquery show and hide div issuejquery显示和隐藏div问题
【发布时间】：2013-01-11 01:50:40
【问题描述】：

我创建了一个可编辑的表单，允许用户编辑他们的个人资料信息。此表单可以保存和修改，因此我需要能够在用户进行操作时保存更新。这工作正常。

表单很长，因此在某些部分中，我有使用 jquery 显示/隐藏的字段，具体取决于先前输入的是或否选择。这也有效，除非如果在重新访问表单时选择并保存了单选输入，则 jquery 会再次隐藏详细信息字段。

所以我需要一些帮助来修改下面的 jquery 代码，这样如果两个单选按钮都没有被选中，详细信息 div 将被隐藏，但如果选择并保存了 Yes 选项，它将在重新访问表单时自动打开！谢谢

$("#diet-details").hide();
$("input[name=diet]").click(function() {
    if ( $("#diet1").attr('checked'))
        $("#diet-details").hide();

    if ( $("#diet2").attr('checked'))
        $("#diet-details").show();
});

【问题讨论】：

您应该将您的状态存储在 session 或 localStorage 中，或者使用 AJAX 提交表单（但是如果您返回该页面，这也会重置表单，因此无论如何都要存储您的输入状态。 )
attr('checked') 返回 未定义。
只是一个仅供参考，因为它是“没有选择单选按钮，详细信息 div 被隐藏” - 与您的代码冲突，因为 #diet1 检查隐藏了该区域...

标签： jquery

【解决方案1】：

您可以将显示/隐藏条件传递给切换功能，而不是总是在开始时隐藏饮食详细信息 div，而是检查是否选中了diet1 选项并在此基础上显示（或隐藏）它，

$(function() {
  $('#diet-details').toggle($("#diet1").is(':checked'));

  $("input[name=diet]").click(function() {
    $('#diet-details').toggle($("#diet1").is(':checked'));
  }); 
});

【讨论】：

@user579984 很高兴我能帮上忙！

【解决方案2】：

另一种设置初始状态的方法：

function checkem() {
  if ($("#diet1").prop('checked')) $("#diet-details").hide();
  if ($("#diet2").prop('checked')) $("#diet-details").show();
}
$("input[name=diet]").click(function () {
  checkem();
});
checkem(); //sets initial state based one current

测试小提琴：http://jsfiddle.net/YqUhZ/

如果您希望它显示是否未选中，则：

function checkem() {
  if ($("input[name=diet]:checked").length) {
    $("#diet-details").hide();
  } else {
    $("#diet-details").show();
  }
}
$("input[name=diet]").change(function () {
  checkem();
});
checkem(); //sets initial state based one current

【讨论】：

您可能还想要.change 事件

【解决方案3】：

一种方法是：

(function(){
    var $d1 = $("#diet1"),
        $d2 = $("#diet2"),
        $details = $("#diet-details");

    !$d2.prop('checked') && $details.hide();

    $("input[name=diet]").click(function() {
        $d1.prop('checked') && $details.hide();
        $d2.prop('checked') && $details.show();
    });
})();

【讨论】：