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代碼重構

回答

相關問題