0

我在我的网站上创建了一个开关。它就像一个电灯开关。当人们点击它时，背景颜色和某些文本段落的颜色会切换为不同的颜色。我编写了下面的代码并成功完成了任务：

  $(".clickme").click(function () {      
     $('html').css('background-color', 'black');
     $('#top_nav a').css('color', '#ff7b00');
     $('.back_face').css('background-color', 'black');
     return false;
  });

但现在我想重新打开灯。我创建了一个名为 lighton 的变量，并将其设置为 0。我尝试使用 if else 语句来完成任务，但它不起作用。以下是我编写但失败的代码：

<a href="" class="clickme">Click me</a>

<script>    
  $(".clickme").click(function () {    
  var lightoff = 0;   
  if (lightoff=0){    
      $('html').css('background-color', 'black');
      $('#top_nav a').css('color', '#ff7b00');
      $('.back_face').css('background-color', 'black');
      lightoff = 1;
      return false;    
 }else{

      $('html').css('background-color', 'white');
      $('#top_nav a').css('color', 'black');
      $('.back_face').css('background-color', 'white');
      lightoff = 0;
      return false;
   }
});

</script>

我最近才开始学习 JavaScript，并且检查了 JavaScript 条件语句语法。所以我希望有人知道我的代码有什么问题。太感谢了。

4

5 回答 5

5

你需要使用 if (lightoff==0){.

=是赋值运算符，而==是比较运算符。

在条件中使用赋值运算符时，将评估分配的值，因此(lightoff=0)将始终评估0然后将其转换为false. 在条件中使用赋值运算符的最常见情况是在分配函数的返回值时，例如( lightoff = checkIfLightIsOff() )

于 2013-08-02T06:00:08.200 回答
3

既然要lightoff跨多次调用回调方法使用的值，就应该定义出handler方法的作用域，这样多次调用方法会共享同一个实例lightoff

同样正如@zzlalani 指出的那样，=运算符代表赋值，您需要的是比较器运算符，它是==

它应该是

var lightoff = 0;

$(".clickme").click(function () {

    if (lightoff==0){

        $('html').css('background-color', 'black');
        $('#top_nav a').css('color', '#ff7b00');
        $('.back_face').css('background-color', 'black');
        lightoff = 1;
        return false;

    }else{

        $('html').css('background-color', 'white');
        $('#top_nav a').css('color', 'black');
        $('.back_face').css('background-color', 'white');
        lightoff = 0;
        return false;
    }
});
于 2013-08-02T05:59:20.273 回答
1

我不是 Javascript 专家，但看起来您使用了 '=' 而不是 "=="，这会将变量设置为 0 而不是比较它。

于 2013-08-02T06:00:36.190 回答
0

而不是=你应该使用==or ===：

  • =是赋值运算符

  • ==等于即，
    x==8 假
    x==5 真

  • ===完全等于（相等的值和相等的类型），即
    x==="5" false
    x===5 true

其他一些情况：

'' == '0'           // false
0 == ''             // true
0 == '0'            // true

false == 'false'    // false
false == '0'        // true

false == undefined  // false
false == null       // false
null == undefined   // true
于 2013-08-02T06:16:13.117 回答
0

另一种方法是切换事件

$(".clickme").toggle(function () {    
    $('html').css('background-color', 'black');
    $('#top_nav a').css('color', '#ff7b00');
    $('.back_face').css('background-color', 'black');
    return false;    
}, function() {
    $('html').css('background-color', 'white');
    $('#top_nav a').css('color', 'black');
    $('.back_face').css('background-color', 'white');
    return false;
});
于 2013-08-02T06:16:20.410 回答