0

我的网站包含单选按钮和复选框。

当用户在表单中选择一个并提交时，该状态会被存储，这样当用户返回页面时，它会按照用户之前的选择加载到该状态。

其中一些复选框具有子元素，当它们的父元素被选中时，它们会更改其禁​​用属性，以便可以与之交互。

我使用 jQuery 函数来实现这一点。

如果用户之前选择了禁用子元素的父元素，那么当他们返回页面时，我需要启用子元素运行的函数。

每次用户在浏览会话期间选择一个时，我还需要运行此功能。

我目前可以通过复制我的 jQuery 函数来实现这一点，一次是在 When DOM Ready 封装中，一次是没有这个。

我怀疑这是不好的做法，我是否正确，如果是，我应该怎么做？

为了说明我的观点，举个例子：

//First the code for DOM ready:
//You can see it disables and unchecks boxes if they are not checked etc.

$(function() {
    if ($('#parent').is(':checked')) {
            $('#child1').removeAttr('disabled');
            $('#child2').removeAttr('disabled');
    } else {
            $('#child1').attr('disabled', true);
            $('#child1').removeAttr('checked');
            $('#child2').attr('disabled', true);
            $('#child2').removeAttr('checked');
    }  

 });

//Now, the exact same function just without the DOM ready encapsulation.

if ($('#parent').is(':checked')) {
            $('#child1').removeAttr('disabled');
            $('#child2').removeAttr('disabled');
    } else {
            $('#child1').attr('disabled', true);
            $('#child1').removeAttr('checked');
            $('#child2').attr('disabled', true);
            $('#child2').removeAttr('checked');
    }

谢谢你的建议。

4

2 回答 2

0

是的，这样的重复代码是不好的做法。所以如果你的代码做了它应该做的，你可以像下面这样写。

我相信您使用的是在 Ajax 框架中执行一些表单 Ajax 任务的 CMS，对吗？（例如Drupal？）否则我无法想象为什么这段代码会像你描述的那样做。

(function($) { 
    var init = function() {
            if ($('#parent').is(':checked')) {
                $('#child1').removeAttr('disabled');
                $('#child2').removeAttr('disabled');
            } else {
                $('#child1').attr('disabled', true);
                $('#child1').removeAttr('checked');
                $('#child2').attr('disabled', true);
                $('#child2').removeAttr('checked');
            }  
        }

    //first call
    init();

    //second call
    $(function() {
        init();
    });

})(jQuery);
于 2014-01-15T10:38:26.800 回答
0

所以基本上你希望你的页面状态保持不变？

您可以将状态存储在几个地方：

  1. 客户端存储
  2. 饼干
  3. 网址哈希

饼干可能是最简单的。

要正确地使状态保持不变，您必须跟踪实际状态。因此，只要 DOM 的状态发生变化，就存储该变化。然后当用户打开页面时，查看 cookie 并恢复状态（这是 DOM 就绪部分）。

这并不总是一件容易的事，因为状态可能非常复杂。想象一下，您有一个可折叠的树，您需要跟踪哪些节点被展开。

如果您只想跟踪一些复选框，那应该不会太难。

于 2012-11-22T22:55:18.890 回答