JavaScript - опция jQuery toggle

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