JavaScript - jQuery切換選項

Question

我有一個腳本來執行一些基於選項變量的任務。選項有一個默認值1.可以通過點擊一些鏈接來切換該值。然後設置一組操作來執行該操作。示例佈局將如下所示;

HTML

<a id="opt1">1</a><br><a id="opt2">2</a><br><a id="opt3">3</a><br> 
<div id="mydiv">option1</div> 

JS

var opt=1; 
$('#opt1').click(function() { 
    opt=1; 
}); 
$('#opt2').click(function() { 
    opt=2; 
}); 
$('#opt3').click(function() { 
    opt=3; 
}); 
if(opt == 1){ 
    $('#mydiv').text("option1"); 
}else if(opt == 2){ 
    $('#mydiv').text("option2"); 
}else{ 
    $('#mydiv').text("option3"); 
} 

JS纏繞文件準備函數內。該示例旨在根據選項變量更改文本。對不起，這些任務不能嵌套在.click(function()內，完全依賴於選項值。我怎樣才能做到這一點？

這裏是小提琴http://jsfiddle.net/Naw3y/

Answer 1

問題是你if情況被稱爲只有一次上的document.ready ..做一個函數，添加您的病情，然後調用這個函數在點擊事件

var opt=1; 
$('#opt1').click(function() { 
    opt=1; 
    divText(opt); //calling divText(1) is shorter :) 
}); 
$('#opt2').click(function() { 
    opt=2; 
    divText(opt) 
}); 
$('#opt3').click(function() { 
    opt=3; 
    divText(opt) 
}); 

function divText(opt){ 
if(opt == 1){ 
    $('#mydiv').text("option1"); 
}else if(opt == 2){ 
    $('#mydiv').text("option2"); 
}else{ 
    $('#mydiv').text("option3"); 
} 
} 

不確定爲什麼你不馬上打電話..沒有如果和功能..但在這裏你去

$('#opt1').click(function() { 
    $('#mydiv').text("option1"); 
}); 
$('#opt2').click(function() { 
    $('#mydiv').text("option2"); 
}); 
$('#opt3').click(function() { 
    $('#mydiv').text("option3"); 
}); 

fiddle here
fiddle for second option

Answer 2

這應該做的伎倆：http://jsfiddle.net/Naw3y/6/：

var opt = 1; 

$(function() { 

$('#opt1').click(function() { 
    opt=1; 
    changeText(); 
}); 

$('#opt2').click(function() { 
    opt=2; 
    changeText(); 
}); 

$('#opt3').click(function() { 
    opt=3; 
    changeText(); 
}); 

}); 

function changeText(){ 
if(opt == 1){ 
    $('#mydiv').text("option1"); 
}else if(opt == 2){ 
    $('#mydiv').text("option2"); 
}else{ 
    $('#mydiv').text("option3"); 
} 
} 

Answer 3

$(document).ready(function(){ 
    $('a').click(function(){ 
     $('#mydiv').text('option'+$(this).html()); 
    }); 
}); 

很抱歉，如果我不明白你的問題以及..試圖解釋越好..

Answer 4

我想你需要在你的情況下是你的財產'封裝'，這是其他答案缺乏的：

var opt; 
//setter function for opt that does the div update 
function setOpt(value) { 
    opt = value; 
    $('#mydiv').text('option' + value); 
} 
$(document).ready(function() { 
    //bind click handlers 
    $('#opt1').click(function() { 
     setOpt(1); 
    }); 
    $('#opt2').click(function() { 
     setOpt(2); 
    }); 
    $('#opt3').click(function() { 
     setOpt(3); 
    }); 
    //set default value 
    setOpt(1); 
});