Question

有人可以检查这部分代码吗？我认为它有一个语法问题，但我无法弄清楚它是什么。我更像是设计师，所以我有非常基本的JavaScript技能

$(document).ready(function(){
var lightstand = 0;

    $('.light').on('click', function() {
        if(lightstand == 0) {
            $('.card').css('background-image','url(img/SOCMUT_eindejaarskaartje_10-2016_HR_BLANCO.jpg)');
            $('#canvas').css('opacity','1');
            var lightstand = 1;
        } else if (lightstand == 1) {
            $('.card').css('background-image','url(img/SOCMUT_eindejaarskaartje_10-2016_HR_BLANCO12.jpg)');
            $('#canvas').css('opacity','0');
            var lightstand = 0;
            }
    });
});

Answer 1

我认为您遇到了问题，因为您多次声明变量nightstand。

试试这个：

$(document).ready(function(){ var lightstand = 0;
    var lightstand = 0;
    $('.light').on('click', function() {
        if(nightstand === 0) {
            $('.card').css('background-image','url(img/SOCMUT_eindejaarskaartje_10-2016_HR_BLANCO.jpg)');
            $('#canvas').css('opacity','1');
            lightstand = 1;
        } else if (lightstand == 1) {
            $('.card').css('background-image','url(img/SOCMUT_eindejaarskaartje_10-2016_HR_BLANCO12.jpg)');
            $('#canvas').css('opacity','0');
            lightstand = 0;
            }
    }); 
});

编辑：

进一步阐述你将来可以做些什么： - 如果您认为if / else语句的行为不正确，请使用

进行测试

alert('hello from IF'); 
alert('hello from ELSE');

或者您也可以使用：

console.log('text');
console.log(variable);

如果您认为语法有问题，请检查是否使用jshint.com

Answer 2

您的问题在于重置lightstand。通过在单击事件处理程序中将var放在它前面，您将在该函数的作用域中创建一个新的lightstand变量。在那里删除var，JavaScript将向上移动范围链以找到外部灯架并进行设置。

$(document).ready(function(){
   var lightstand = 0; //KEEP VAR HERE

   $('.light').on('click', function() {
       if(lightstand == 0) {
           $('.card').css('background-image','url(img/SOCMUT_eindejaarskaartje_10-2016_HR_BLANCO.jpg)');
           $('#canvas').css('opacity','1');
           lightstand = 1; //REMOVE VAR FROM HERE
       } else if (lightstand == 1) {
           $('.card').css('background-image','url(img/SOCMUT_eindejaarskaartje_10-2016_HR_BLANCO12.jpg)');
           $('#canvas').css('opacity','0');
           lightstand = 0; //REMOVE VAR FROM HERE TOO!!
        }
    });
});

这是一个相当不错的JavaScript范围 http://ryanmorr.com/understanding-scope-and-context-in-javascript/

JavaScript if / else语句的行为不符合预期

2 个答案: