-1

オプション変数に基づいていくつかのタスクを実行するスクリプトがあります。オプションのデフォルト値は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/

4

4 に答える 4

1

問題は、if条件がdocument.readyで1回だけ呼び出されることです。関数を作成し、条件を追加して、クリックイベントでその関数を呼び出します。

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

ここで
フィドル2番目のオプションのフィドル

于 2013-03-17T18:03:12.780 に答える
0

これでうまくいくはずです： 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");
 }
}
于 2013-03-17T18:03:54.660 に答える
0

私はあなたがあなたの状況で必要なのはあなたの財産の「カプセル化」であると思います、そしてこれは他の答えが欠けているものです：

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);
});
于 2013-03-17T18:48:06.100 に答える
-1 
$(document).ready(function(){
   $('a').click(function(){
       $('#mydiv').text('option'+$(this).html());
   });
});

申し訳ありませんが、私があなたの質問をよく理解していなかった場合..よりよく説明してみてください..

于 2013-03-17T18:04:19.563 に答える