jQuery代码重构

-1

只想了解如何更好地编写代码，它工作正常，我只是想学习如何更好地编写jQuery，所以我想要一些聪明人的意见。谢谢！jQuery代码重构

它正在检查送货地址字段，通过查找“PO”的变体来查看它是否包含邮政信箱地址，然后在输入后显示警告消息（如果它包含它）。

(function ($) { 
    var $shipAddress = $('input[name="user_data[s_address]"]'), 
     message = '<div class="message hidden"><p>We <strong>don\'t ship to PO Boxes</strong>. Sorry for the inconvenience.</p></div>'; 

    $shipAddress.after(message); 

    $shipAddress.keyup(function() { 
     var $value = $(this).val(); 

     if ($value === 'po' || $value === 'p.o' || $value === 'PO' || $value === 'P.O') { 
      $shipAddress.siblings('.message').removeClass('hidden'); 
     } else if ($value === '') { 
      $shipAddress.siblings('.message').addClass('hidden'); 
     } 
    }); 

}(jQuery));

来源

2013-02-07 ferne97

[请看看codereview.stackexchange.com（http://codereview.stackexchange.com） – Ohgodwhy

小的改进可以做但实际上这看起来不错。我建议继续构建你的应用程序。 –

谢谢，不知道codereview.stackexchange.com – ferne97

这是非常好的代码。我看到你正在添加/删除类来隐藏/显示元素。您可以使用.hide()和.show()来代替使用类来处理元素的可见性。这将添加/删除内嵌样式display: none;

所以，与其

$shipAddress.siblings('.message').removeClass('hidden'); 
$shipAddress.siblings('.message').addClass('hidden');

你可以简单地做：

$shipAddress.siblings('.message').show(); 
$shipAddress.siblings('.message').hide();

所以你不需要编写额外的CSS类。但那只是一个小小的改进。也许这只是一个意见问题，但我更喜欢隐藏和显示功能。

参见：http://jsfiddle.net/6RnxG/2/

来源

2013-02-07 21:26:01 bpoiss

很酷，认为这是一个更干净，多谢输入 – ferne97

jQuery代码重构

回答

相关问题