JavaScript-jQuery切换选项

JavaScript - jQuery toggle option

本文关键字：选项 JavaScript-jQuery      更新时间：2023-09-26

我有一个脚本来执行一些基于选项变量的任务。选项的默认值为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/

问题是您的if条件在文档上只调用一次。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");
});

小提琴在这里
第二个选项的小提琴

这应该可以做到：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");
 }
}

我认为在您的情况下，您需要的是属性的"封装"，而这正是其他答案所缺乏的：

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

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

对不起，如果我不太理解你的问题。。试着解释得更好。。

相关文章：