Question

我正在使用jQuery函数检查不同输入的值，并根据它们是否有值，将相关图像切换为动画gif。

需要一个计数器，否则动画gif会继续回收。

// First Input and Image Swap
$("#input1").on('change keyup', function() {var counter=0;  
if ($('#input1').val()) {
if(counter=0){
$('#image1').prop('src', 'https://www.example.com/image.gif');counter++;
} } else { 
$('#image1').prop('src', 'https://www.example.com/image.png');counter=0;
}
});

// Second Input and Image Swap
$("#input2").on('change keyup', function() {var counter=0;  
if ($('#input2').val()) {
if(counter=0){
$('#image2').prop('src', 'https://www.example.com/image.gif');counter++;
} } else { 
$('#image2').prop('src', 'https://www.example.com/image.png');counter=0;
}
});

代码适用于第一个输入，但第二个输入将计数器重置为零。有没有办法为每个函数指定特定的var计数器，还是可以通过循环解决？

Answer 1

您的代码存在一个主要问题：分配给变量

这一行：

// It's always assigning the value 0 (zero) to your local variable `counter`.
if (counter = 0)

运行您的代码：

添加了一些日志来说明

// First Input and Image Swap
$("#input1").on('change keyup', function() {
  var counter = 0;
  if ($('#input1').val()) {
    if (counter = 0) {
      $('#image1').prop('src', 'https://www.example.com/image.gif');
      counter++;
    }
  } else {
    $('#image1').prop('src', 'https://www.example.com/image.png');
    counter = 0;
  }
  console.log(`Counter 1 ${counter}`);
});

// Second Input and Image Swap
$("#input2").on('change keyup', function() {
  var counter = 0;
  if ($('#input2').val()) {
    if (counter = 0) {
      $('#image2').prop('src', 'https://www.example.com/image.gif');
      counter++;
    }
  } else {
    $('#image2').prop('src', 'https://www.example.com/image.png');
    counter = 0;
  }
  console.log(`Counter 2 ${counter}`);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Counter 1<br>
<input id='input1'>

<br> Counter 2<br>
<input id='input2'>

请参阅，本地计数器始终为value = 0。

您的代码的第二个版本：

使用正确的逻辑运算符==

if (counter == 0)

运行此版本：

// First Input and Image Swap
$("#input1").on('change keyup', function() {
  var counter = 0;
  if ($('#input1').val()) {
    if (counter == 0) {
      $('#image1').prop('src', 'https://www.example.com/image.gif');
      counter++;
    }
  } else {
    $('#image1').prop('src', 'https://www.example.com/image.png');
    counter = 0;
  }
  console.log(`Counter 1 ${counter}`);
});

// Second Input and Image Swap
$("#input2").on('change keyup', function() {
  var counter = 0;
  if ($('#input2').val()) {
    if (counter == 0) {
      $('#image2').prop('src', 'https://www.example.com/image.gif');
      counter++;
    }
  } else {
    $('#image2').prop('src', 'https://www.example.com/image.png');
    counter = 0;
  }
  console.log(`Counter 2 ${counter}`);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Counter 1<br>
<input id='input1'>

<br> Counter 2<br>
<input id='input2'>

请参阅，您的变量计数器已递增。

第三版，创建全局变量

var counter = 0;
// First Input and Image Swap
$("#input1").on('change keyup', function() {
  if ($('#input1').val()) {
    if (counter == 0) {
      $('#image1').prop('src', 'https://www.example.com/image.gif');
      counter++;
    }
  } else {
    $('#image1').prop('src', 'https://www.example.com/image.png');
    counter = 0;
  }
  console.log(`Counter 1 ${counter}`);
});

// Second Input and Image Swap
$("#input2").on('change keyup', function() {
  if ($('#input2').val()) {
    if (counter == 0) {
      $('#image2').prop('src', 'https://www.example.com/image.gif');
      counter++;
    }
  } else {
    $('#image2').prop('src', 'https://www.example.com/image.png');
    counter = 0;
  }
  console.log(`Counter 2 ${counter}`);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Counter 1<br>
<input id='input1'>

<br> Counter 2<br>
<input id='input2'>

此第三个版本与第二个版本具有相同的行为，但是，仅使用一个计数器变量。

jQuery使用多个Var计数器

1 个答案: