3

次のコードがあります。

$("#ca li").click(function(){
    $("#ca li").css('text-decoration','none');
    $(this).css('text-decoration','underline');
    var sec = $(this).html();    
});

if (sec == 'Africa') {
    var ar = 'this is';
} else {
    var ar = 'is that';
}
$('#co').html(ar);

html:

<ul id='ca'>
    <li>Africa</li>
    <li>Americas</li>
    <li>Asia</li>
    <li>Europe</li>
    <li>Oceania<li>
</ul>

クリックしても変数secは変化しません。私に何ができる？

4

5 に答える 5

3

javascript変数のスコープについてもっと読む必要があります

var sec; 
var ar;

$("#ca li").click(function(){
    $("#ca li").css('text-decoration','none');
    $(this).css('text-decoration','underline');
    sec = $(this).html(); 
});

ar = (sec == 'Africa') ? 'this is' : 'is that'; //ternary operator
$('#co').html(ar);

sec 変数を関数の外に移動するだけで機能します。そうしないと、関数内に存在します。

于 2012-11-02T13:32:24.807 に答える
2

jsBin demo

function changeText(sec){
  var ar = sec=='Africa' ? 'this is' : 'is that';
  $('#co').text(ar);  
}


$("#ca li").click(function(){
    $("#ca li").css('text-decoration','none');
    $(this).css('text-decoration','underline');
    var sec = $(this).text(); 
    changeText(sec);
});
于 2012-11-02T13:31:15.497 に答える
0 
$("#ca li").click(function(){
    $("#ca li").css('text-decoration','none');
    $(this).css('text-decoration','underline');
    var sec = $(this).html();  
    if (sec == 'Africa') {
      var ar = 'this is';
     } else {
       var ar = 'is that';
     }
     $('#co').html(ar);  
});

クリックイベントで値を変更したいと思います..いいえ?..なので、コールバック関数の中に入れます。

于 2012-11-02T13:31:01.283 に答える
0

これを試して：

var sec;

$("#ca li").click(function(){
    $("#ca li").css('text-decoration','none');
    $(this).css('text-decoration','underline');
    sec = $(this).html();    
});

if (sec == 'Africa') {
    var ar = 'this is';
} else {
    var ar = 'is that';
}
$('#co').html(ar);

(これはグローバル変数を使用して動作しますが、適切なコーディングとは見なされません。)

于 2012-11-02T13:31:18.140 に答える
0

他の人が強調した問題は、クリッククロージャー内で変数を宣言していることです。これは、クリック ハンドラーが起動するたびに再定義され、クロージャーの外部から参照できないことを意味します。クロージャーの外側で変数を宣言することでこれを修正します。また、これがベスト プラクティスであり、if(){}else() で同様のスコープの誤用があったため、ar 宣言を一番上に持ってきました。これにより、問題が解決され、リンターに準拠するようになります。

var sec, ar;

$("#ca li").click(function(){
    $("#ca li").css('text-decoration','none');
    $(this).css('text-decoration','underline');
    sec = $(this).html();    
});

if (sec == 'Africa') {
    ar = 'this is';
} else {
    ar = 'is that';
}
$('#co').html(ar);
于 2012-11-05T06:18:12.400 に答える