Question

这个功能是相当自我解释的，但由于某些原因我不能让它起作用：

var windowWidth;

$(document).ready( function(){
    windowWidth = $(window).width();
    console.log(windowWidth);
});

$(window).resize( function(){
    windowWidth = $(window).width();
    console.log(windowWidth);
});


if (windowWidth > 600) {
    $('input').click( function(){

        var $inputname = $(this).attr('name');
        $('label[for="' + $inputname + '"]').removeClass('repositioned');

    });
}

else {
    $('input').click( function(){

        var $inputname = $(this).attr('name');
        $('label[for="' + $inputname + '"]').addClass('clear');

    });
}

如果窗口大于600，则单击应运行if语句;如果它小于它应该运行else语句，但它没有运行第二部分？我仔细研究过它，无法弄清楚为什么它没有采取适当的行动。

Answer 1

您应该在事件处理函数内部执行if / else分支：

var windowWidth;

$(document).ready( function(){
  windowWidth = $(window).width();
  console.log(windowWidth);
});

$(window).resize( function(){
  windowWidth = $(window).width();
  console.log(windowWidth);
});

$('input').click( function(){
  var $inputname;

  if (windowWidth > 600) {
    $inputname = $(this).attr('name');
    $('label[for="' + $inputname + '"]').removeClass('repositioned');
  } else {
    $inputname = $(this).attr('name');
    $('label[for="' + $inputname + '"]').addClass('clear');
  }

});

Answer 2

将您的javascript功能更改为此

$('input').click(function () {
    if (windowWidth > 600) {

        var $inputname = $(this).attr('name');
        $('label[for="' + $inputname + '"]').removeClass('repositioned');
        console.log("> 600");
    } else {

        var $inputname = $(this).attr('name');
        $('label[for="' + $inputname + '"]').addClass('clear');
        console.log("< 600");
    };
});

如果Else排除故障

2 个答案: