如何將多個jQuery函數壓縮成一個？

我對jQuery還相當陌生，並且試圖選擇一些方法來幫助優化我的代碼。我目前正在研究一個應用程序，在每次有人離開字段（.blur）時我都會調用一些計算方法。我只想在滿足某些條件時調用這些方法（例如value！= 0）。我有9個字段，目前正在計算和檢查。如何將多個jQuery函數壓縮成一個？

$(document).ready(function() { 
var currentValue = {}; 

$("#txtValue1").focus(function() { 
    currentValue = $(this).val(); 
} 
).blur(function() { 
    $("#txtValue1").valid(); 
    if (currentValue != $("#txtValue1").val() && $("#txtValue1").val() != "") { 
     CallCalculations(); 
    } 
}); 

$("#txtValue2").focus(function() { 
    currentValue = $(this).val(); 
} 
).blur(function() { 
    $("#txtValue2").valid(); 
    if (currentValue != $("#txtValue2").val() && $("#txtValue2").val() != "") { 
     CallCalculations(); 
    } 
}); 
}); 

function CallCalculations() { 
    // Do Stuff 
};

我知道這是可能向下凝結這些功能集成到一個更通用的一個（使用CSS類作爲一個選擇，而不是ID），但我似乎無法推測出來，因爲我現在還在一般來說，新的jQuery/JavaScript。任何幫助將不勝感激。謝謝！

來源

2010-08-03 Delebrin

你可以跳過實例化'currentValue'作爲一個對象（var currentValue = {}'），然後執行'var currentValue;' – 2010-08-03 15:07:55

感謝您的澄清。我一定會刪除額外的實例。 – Delebrin 2010-08-03 15:48:35

首先，您不需要對焦點和模糊進行值緩存。您可以使用change()。

如果你要ASIGN一個類你要檢查所有的文本框...如：

<input type="text" class="calculateOnChange" />

那麼你可以使用一個類jQuery選擇：更普遍

$('.calculateOnChange').change(function() { 
    if($(this).val() != '') { 
     CallCalculations(this); 
    } 
});

或者，你可以應用文檔中的每個文本框：

$(':input[type=text]').change(/* ...etc */));

來源

2010-08-03 15:11:16 fearofawhackplanet

+1用於回答OP可能*需要*問的基本問題。 – DMA57361 2010-08-03 15:18:44

謝謝。不能相信這裏有5個其他的答案，沒有人注意到整個'focus'和'blur'這個東西是不需要的。只是去顯示你不能相信從互聯網的建議:) – fearofawhackplanet 2010-08-03 15:25:21

的確。不幸的是，這是[西方問題中最快的槍]的副作用（http://meta.stackexchange.com/questions/9731/fastest-gun-in-the-west-problem），在這種情況下，我碰巧也有罪。 – DMA57361 2010-08-03 15:29:21

你可以結合你的ID選擇這樣的：

$("#txtValue1, #txtValue2").focus(//etc...

或者你可以用這樣的CSS選擇器（剛纔設置的類對相關的HTML元素，就像任何其他類）：

$(".txtValue").focus(//etc...

和裏面模糊功能，你可以參考$(this)而不是回顧選擇。

最終結果。

$(".txtValue").focus(function() {  
    currentValue = $(this).val();  
}  
).blur(function() {  
    $(this).valid();  
    if (currentValue != $(this).val() && $(this).val() != "") {  
     CallCalculations();  
    }  
});

來源

2010-08-03 15:05:58 DMA57361

謝謝你的回答。我知道我可以將選擇器合併爲一個語句，但使用$（this）.val（）引用是我稍微困惑的地方（因爲我在技術上離開了這個領域，我一直認爲它不能正常工作）。 – Delebrin 2010-08-03 15:52:21

給您的要素類像，然後你可以這樣做：

$(document).ready(function() { 
var currentValue = {}; 

$(".textValues").focus(function() { 
    currentValue = $(this).val(); 
}).blur(function() { 
    var that = $(this); 
    that.valid(); 
    if (currentValue != that.val() && that.val() != "") { 
     CallCalculations(); 
    } 
}); 
}); 

function CallCalculations() { 
    // Do Stuff 
};

來源

2010-08-03 15:06:01 PetersenDidIt

你可以重構它這樣兩個輸入：

$("#txtValue1, #txtValue2").focus(function() { 
    currentValue = $(this).val(); 
} 
).blur(function() { 
    $(this).valid(); 
    if (currentValue != $(this).val() && $(this).val() != "") { 
     CallCalculations(); 
    } 
});

來源

2010-08-03 15:06:34 Sarfraz

可以鞏固類似的事情像這樣：

$(document).ready(function() { 
    var currentValue = {}; 

    $("#txtValue1, #txtValue2, #txtValue3, #txtValue4").focus(function() { 
    currentValue = $(this).val(); 
    }).blur(function() { 
    $(this).valid(); 
    if (currentValue != $(this).val() && $(this).val() != "") { 
     // DO STUFF?? 
    } 
    }); 
});

我不知道這是你在找什麼？

來源

2010-08-03 15:07:42

如何將多個jQuery函數壓縮成一個？

回答

相關問題