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上调用一次..创建一个函数，添加条件并在click事件中调用该函数

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

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

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

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 4

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

抱歉，如果我没有理解你的问题，请尝试解释一下......

JavaScript - jQuery切换选项

4 个答案: