0

我觉得我所做的这一点 jQuery 可以做一些改进，并且可以变得更干净。我可能是错的，但有什么想法或怎么做？

jQuery("#user_type_2_wrapper label").addClass("active");
jQuery("#user_type_3_wrapper label i").hide();

jQuery('input[type="radio"]').on('change', function(){
  if (jQuery(this).val()=='2') {
    jQuery("#user_type_3_wrapper label").removeClass();
    jQuery("#user_type_3_wrapper label i").hide();
    jQuery("#user_type_2_wrapper label i").show();
    jQuery("#user_type_2_wrapper label").addClass("active");
  } else {
    jQuery("#user_type_2_wrapper label").removeClass();
    jQuery("#user_type_2_wrapper label i").hide();
    jQuery("#user_type_3_wrapper label i").show();
    jQuery("#user_type_3_wrapper label").addClass("active");
  }
});

Html 标记是这样的：

<ul>
  <li id="#user_type_2_wrapper">
  <label>
    <i class="icon"></i>
    <input type="radio" value="2" />
    label text for option 2
  </label>
  </li>
  <li id="#user_type_3_wrapper">
  <label>
    <i class="icon"></i>
    <input type="radio" value="3" />
    label text for option 3
  </label>
  </li>
</ul>
4

2 回答 2

1

基本上每个复制的对象都可以成为一个对象。也许使用一个函数，以便您可以在需要时调用它。

如果您使用如下所示的IIFE，则可以将此代码放在外部 *.js 文件中。然后它将在加载页面时尽快运行，而不会停止其他 http 请求。jQuery还将对象作为参数传入，以便您可以安全地使用$。

配置 (1) 分离允许您在需要时轻松更改内容。它们也被分组并为您提供更好的概览。与其他对象相比，该cfg变量是“局部全局”，因此您可以cfg在整个脚本中使用。

窗口对象 (2) 将您的功能或组件组合在一个对象中。基本上，项目的一个 DOM 对象是理想的恕我直言。还允许您访问window.ComponentName其他文件。

激活 (3) 由您控制。目前它使用常见的 DOM 就绪事件并且基本上只是运行该init()函数。

// @param ($): jquery version x?
(function ($) {
    // ECMA-262/5
    "use strict";

    // 1. CONFIG
    var cfg = {
        usertypetwo: "#user_type_2_wrapper",
        usertypethree: "#user_type_3_wrapper",
        radios: "input[type='radio']",
        active: "active"
    };

    // 2. OBJECT
    window.ComponentName = {
        // 2.1 initialize
        init: function () {
            this.cacheItems();
            this.bindEvents();
            this.activate();
        },

        // 2.2 cache objects you need
        cacheItems: function () {
            this.userTypeTwo = $(cfg.usertypetwo);
            this.userTypeThree = $(cfg.usertypethree);
            this.radios = $(cfg.radios);
        },

        // 2.3 bind events
        bindEvents: function () {
            var proj = this;

            proj.radios.on("change", function (i, item) {
                // below vars could be moved to cacheItems for your example
                var twoLabel = proj.userTypeTwo.find("label"),
                    twoLabelI = proj.userTypeTwo.find("label i"),
                    threeLabel = proj.userTypeThree.find("label"),
                    threeLabelI = proj.userTypeThree.find("label i");

                if (parseInt(item.val(), 10) === 2) {
                    threeLabel.removeClass();
                    threeLabelI.hide();
                    twoLabelI.show();
                    twoLabel.addClass(cfg.active);
                } else {
                    twoLabel.removeClass();
                    twoLabelI.hide();
                    threeLabelI.show();
                    threeLabel.addClass(cfg.active);
                }
            });
        },

        // 2.4 do something on activation
        activate: function () {
            this.userTypeTwo.find("label").addClass(cfg.active);
            this.userTypeThree.find("label i").hide();
        }
    };

    // 3. INITIALIZE ON DOM READY
    $(function() {
        ComponentName.init();
    });
}(jQuery));

没有检查这是否有效，但它应该^^

这种方法允许您组合多个组件，一旦您发布到生产环境，您应该通过压缩器运行这些组件。希望这能让您了解这些天如何以“模块化”方式设置事物。

于 2013-10-25T15:11:09.993 回答
0

如果您要添加删除类然后添加display none它，这将解决显示隐藏问题。

也代替adding/removing toggle班级

.active
{
  //other props
  display:none;
}
于 2013-10-25T14:34:28.420 回答