目的
撰寫Js時,不想重複撰寫相同的函數,可以將函數命名,方便套用
範例
.countbox
.minus -
.num 12
.pulse +
.text 賣得不錯喔
*
border: 1px solid #000
.countbox
width: 200px
background-color: #333
color: #fff
.minus,.num,.pulse
display: inline-block
font-family: '微軟正黑體'
font-size: 49px
padding: 5px
user-select: none
.num
width: 50px
text-align: center
.minus,.pulse
cursor: pointer
.text
font-family: '微軟正黑體'
text-align: center
padding: 5px
var num = 12
// function定義
function check() {
if (num < 10) {
$(".text").text("數量極少");
} else if (num < 20) {
$(".text").text("賣得不錯喔");
} else {
$(".text").text("還剩很多");
}
}
// 按鈕功能
$(".minus").click(
function() {
num = num - 1
$(".num").text(num);
check();
}
);
$(".pulse").click(
function() {
num = num + 1
$(".num").text(num);
check();
}
);
jQuery簡化
var num = 12
// function定義
function check() {
if (num < 10) {
$(".text").text("數量極少");
} else if (num < 20) {
$(".text").text("賣得不錯喔");
} else {
$(".text").text("還剩很多");
}
}
// 按鈕功能
function click(num_var) {
num = num + num_var
}
$(".minus").click(
function() {
click(-1);
check();
}
);
$(".pulse").click(
function() {
click(1);
check();
}
);
Display
return
return可以把結果叫出來
var result;
function add(num1, num2){
//計算但沒有講出來
var X = num1 + num2;
//講出來
return X;
}
//呼叫函數
result = add(1,2);
迴圈化函數
將相似並且重複多次的函數,寫成一個迴圈
//迴圈前的函數們
$("#0").click(
function() {
items[0].number++;
showlist();
}
)
$("#1").click(
function() {
items[1].number++;
showlist();
}
)
$("#2").click(
function() {
items[2].number++;
showlist();
}
)
$("#3").click(
function() {
items[3].number++;
showlist();
}
)
$("#4").click(
function() {
items[4].number++;
showlist();
}
)
$("#5").click(
function() {
items[5].number++;
showlist();
}
)
//迴圈後
//迴圈後
for(i=;i<6;i++){
//因為迴圈跑完後,i會消失,所以要再function外面再包一層臨時函數,設定一個臨時參數(參數會保存下來
var tempFunction=function(tempVar){
$("#"+tempVar).click(
function(){
items[tempVar].number++;
showlist():
}
);
}
//然後再把i帶進去臨時函數裡面
tempFunction(i);
}