jQuery 使用多个 Var 计数器

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 计数器

jQuery Working with Multiple Var Counters

javascript

jquery

loops

var