Question

我觉得我所做的这一点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>

Answer 1

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

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

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

窗口对象（2）将您的功能或组件分组到一个对象中。基本上，项目的一个DOM对象是理想的imho。您也可以在其他文件中访问window.ComponentName。

激活（3）在您的控制之下。目前它使用常见的DOM ready事件，基本上只运行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));

尚未检查是否有效，但应该是^^

这种方法允许您组合在发布到生产环境后应通过minifier运行的多个组件。希望这能让您了解如何以“模块化”的方式设置事物。

Answer 2

如果要添加删除类，则在其中添加display none，这将解决显示隐藏问题。

而不是adding/removing toggle类

.active
{
  //other props
  display:none;
}

将jQuery代码清理成更好的东西

2 个答案: