任何人都可以幫助我使這個腳本更簡單嗎？

-2

我有一個跨度和輸入字段，當輸入字段爲空時，我需要它跨度說「空」。當我在字段中輸入一些文本時，跨度將自動將字母/數字添加到跨度。如果輸入值被移除，跨度將再次表示「空」。任何人都可以幫助我使這個腳本更簡單嗎？

if($.trim($('#input').val()) == ''){ 
    $('#span').html('Empty'); 
} 
$('#input').bind("change keyup input",function() { 
    $('#span').html($(this).val()); 
    if($.trim($('#input').val()) == ''){ 
     $('#span').html('Empty'); 
    } 
});

我認爲這可以用更簡單的方式實現，並希望只在一個函數內。這可能嗎？

來源

2016-03-09 Kroglid

沒有downvote，但我認爲http://codereview.stackexchange.com/在這種情況下更合適。 – lex82

它是簡單的：設置#span元素的HTML具有的功能，並且在運行時期間執行功能兩者，並且在結合於#input字段的某些事件。我建議使用.on()代替.bind()：

// Define function that sets html value 
 
var updateSpan = function() { 
 
    var v = $.trim($(this).val()); 
 
    if(v === '') { 
 
    $('#span').html('Empty'); 
 
    } else { 
 
    $('#span').html(v); 
 
    } 
 
} 
 

 
// Execute function at runtime 
 
// We use .call() so that `this` in the function refers to our input 
 
updateSpan.call($('#input')[0]); 
 

 
// Bind the function as a callback during these events, too 
 
// The element is automatically passed as `this` 
 
$('#input').on('change keyup input', updateSpan);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="input" /> 
 
<span id="span"></span>

如果你很喜歡混亂的代碼，你甚至可以縮短if聲明成這樣：

var updateSpan = function() { 
    var v = $.trim($(this).val()); 
    $('#span').html(v === '' ? 'Empty' : v); 
}

來源

2016-03-09 22:20:01 Terry

雖然它比我的4條線佔用了更多的空間，但我認爲這更容易理解。條件'$（this）.val（）。trim（）==''' – lex82

如果你醜化了你的JS，所有東西都可以做成一行;） – Terry

$('#input').on("change keyup input",function() { 
    if($.trim($('#input').val()) == ''){ 
     $('#span').html('Empty'); 
    } else { 
     $('#span').html($(this).val()); 
    } 
});

來源

2016-03-09 22:18:04

使用鼠標進行復制和粘貼時，可能會發生不涉及密碼鍵的更改事件。 – lex82

@ lex82好吧，讓我們保持原樣。 –

你錯過了跨度應該被初始化。該事件必須觸發一次。看到我的答案。 – lex82

是的，你才真正我幾乎可以想到每一種情況都需要關注，這是我頭頂的關鍵。

你可以用.on和觸發器替換.bind來「關鍵」。

創建函數後，可以通過觸發其中一個觸發器來調用它，同時仍然使用相同的選擇器。

像這樣;

$('#input').on('keyup', function(){ 
    text = $(this).val().trim(); 
    if(text == ''){ 
     $('#span').html('Empty'); 
    } else { 
     $('#span').html(text); 
    } 
}).trigger('keyup');

或者你可以定義一個函數，如：

$.fn.emptyCheck = function(){ 
     return (this.val().trim() != ''); 
}

或

$.fn.emptyCheck = function(){ 
    text = this.val().trim(); 
    if(text == ''){ 
     $('#selector').html('Empty'); 
    } else { 
     $('#selector').html(text); 
}

然後通過分別使用

$('input').on('keyup', function(){ 
     if($(this).emptyCheck()){ 
      /* your function */ 
     } 
});

或

$('input').on('keyup', function(){ 
    $(this).emptyCheck(); 
}

調用它。

來源

2016-03-09 22:29:56 Webber

你忘記了在輸入時更新範圍不是空的。 – lex82

謝謝，更新 – Webber

這應該做的伎倆：

$('#input') 
    .bind("change keyup input", function() { 
     updateSpan($(this).val()); 
    }) 
    .trigger('keyup'); 

function updateSpan(s) { 
    $('#span').html(s.trim() == '' ? 'Empty' : s); 
}

最後.keyUp()確保該事件被觸發一次，這樣的跨度被初始化。

您可以使用較少的代碼來編寫此代碼。不過，我認爲這是一個很好的妥協。您可以一口氣讀取它，不必解密複雜的表達式，也沒有冗餘。

來源

2016-03-09 22:37:17 lex82

任何人都可以幫助我使這個腳本更簡單嗎？

回答

相關問題