jQuery 使用多个 Var 计数器答案

【问题标题】：jQuery Working with Multiple Var CountersjQuery 使用多个 Var 计数器
【发布时间】：2018-07-06 21:53:14
【问题描述】：

我正在使用 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 计数器，或者可以用循环解决这个问题？

【问题讨论】：

请发minimal reproducible example。您的两个计数器的范围都限于它们的包含函数，因此应该没有任何问题。
抱歉 @j08691 我未能在原始代码中包含“if(counter=0){”。
您正在使用=，它是一个赋值运算符来进行至少应该有== 的比较。 if(counter=0){ 行不会比较它实际上分配

标签： javascript jquery loops var

【解决方案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'>

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

【讨论】：