jquery - 在jquery的click函数中声明一个var

Question

我有以下代码：

$("#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>

点击后varsec不会改变。我能做些什么？

Answer 1

您需要阅读有关 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 变量移到函数外部，它就会起作用，否则它将存在/存在于函数内部。

Answer 2

jsBin 演示

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

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

我假设您希望该值随单击事件而改变.. 否？...所以将其放在回调函数中。

Answer 4

试试这个：

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

（这将使用全局变量，它可以工作，但它不被认为是好的编码。）

Answer 5

正如其他人所强调的那样，问题是您在 click 闭包中声明了您的变量。这意味着每次点击处理程序触发时都会重新定义它，并且不能从闭包外部引用它。我们通过在闭包之外声明变量来解决这个问题。我还将 ar 声明放在首位，因为这是最佳实践，并且您在 if(){}else() 中也有类似的范围滥用。这将解决您的问题并使您符合 linter 标准。

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