javascript - 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");
 }
}

不知道你为什么不马上打电话.. 没有 if 和功能.. 但你去

$('#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

我认为你在你的情况下需要的是你的财产的“封装”，这是其他答案所缺乏的：

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);
});

Answer 3

这应该可以解决问题： 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 4

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

抱歉，如果我没有很好地理解您的问题.. 尝试更好地解释..