Javascript條件執行和簡化

Question

我有以下腳本，但是我認為這可以簡化，對吧？ 另外，我想它只能觸發一次。

例如，用戶輸入“我的標題”。 腳本執行，用戶在slug字段中看到“my-title”。 如果用戶用“我的瘋狂標題”替換標題值，我希望slug保持“my-title”。 怎么樣？

$('#article_title').change(function() {
  str = $('#article_title').val();
  formatted = str.replace(/\s+/g, '-').toLowerCase();
  $('#article_slug').val(formatted);
});

參見代碼示例http://jsfiddle.net/TSrYu/

Answer 1

var changed = false;
$('#article_title').change(function () {
    // do some other stuff
    if (!changed) {
        str = $(this).val();
        formatted = str.replace(/\s+/g, '-').toLowerCase();
        $('#article_slug').val(formatted);
    }
    changed = true;
});

http://jsfiddle.net/mohammadAdil/TSrYu/1/

Answer 2

你可以這樣簡化它：

1. 切換到使用.one()注冊您的事件處理程序，以便它只觸發一次。
2. 刪除中間變量，只需一次處理字符串

編碼：

$('#article_title').one('change', function() {
    $('#article_slug').val($(this).val().replace(/\s+/g, '-').toLowerCase());
});

工作演示： http ： //jsfiddle.net/jfriend00/XGjWA/

Answer 3

您可以進行兩項小改進：

• 通過正確聲明變量，不使變量成為全局變量。
• 不會再次查詢DOM的元素，因為它已經通過訪問可用this

要確保它只發生一次，您可以取消綁定事件（片段中的最后一行）

$('#article_title').change(function() {
  var str = $(this).val();
  var formatted = str.replace(/\s+/g, '-').toLowerCase();
  $('#article_slug').val(formatted);
  $(this).unbind("change");
});