清理jQuery代码更好一些

我觉得我已经完成的这一点jQuery可以做一些改进，并且可以做得更干净。我可能是错的，但是有什么想法或如何做到？清理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>

来源

2013-10-25 James Brandon

这个问题似乎是脱离主题，因为它属于http://codereview.stackexchange.com –

不应该''我已被隐藏，因为它是一个标签的孩子。 – tymeJV

除了单个字符外，您的选择器和逻辑是相同的。 –

基本上每复制的对象可以由一个对象。也可以使用一个功能，以便在需要时调用它。

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

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

窗口对象（2）将您的功能或组件组合到一个对象中。基本上一个项目的DOM对象是理想的imho。允许您在其他文件中访问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));

没有检查，如果这个工程，但它应该^^

这种方法可以让你，你应该通过minifier运行多个组件，一旦你发布到生产环境结合起来。希望这给你一个关于如何以“模块化”的方式设置事物的想法。

来源

2013-10-25 15:11:09

伟大的结果，它不会更短，因为认为这将是一个更小的解决方案，但这工作可爱，写得比我的好得多。非常感谢！这很棒！ –

如果要添加然后除去类其添加display none，这会照顾显示隐藏的问题。的

此外代替adding/removingtoggle类

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

来源

2013-10-25 14:34:28 Rex

清理jQuery代码更好一些

回答

相关问题