Question

我想要在点击图像时增加一组计数器。单击图像时，我得到图像的值attr。然后我可以在一个名称和所有的div中显示相应的图像，我想增加它的响应计数器。这是代码：

var counter1 = 0;
var counter2 = 0;
var counter3 = 0;
var counter4 = 0;

$('body').click(function(e) {

    var target = $(e.target); // Which cat was clicked
    value = target.attr("value");
    counter = "counter"+ value;
    console.log(counter);
    counter++;
    console.log(counter);
    $("img").attr({src:"./images/cat" + value +".png"});
    $("h5").html("Cat " + value);
    $("p").html(counter);
});

我遇到的问题是例如counter = counter1，但是当我做一个计数器++时，我得到了NaN。如果我只是使用：

counter1++; // or any other counter

它使全局计数器变量增加。

我做错了什么？

Answer 1

为什么不做这样的事情呢？

//store in array
var counter[1]=0,counter[2]=0,counter[3]=0,counter[4]=0;

//increment the value
counter[value]++;

Answer 2

counter = "counter"+ value;
counter++;

这就是你做错了。在第一行中，您将字符串“counter”附加一个数字（例如3），因此结果也是一个字符串（例如“counter3”）。现在在第2行，你试图增加它。这显然不会起作用，因为字符串不会增加。

你应该像@Ish提到的那样做。像这样：

//store in array
var counter[1]=0,counter[2]=0,counter[3]=0,counter[4]=0;

$('body').click(function(e) {

    var target = $(e.target); // Which cat was clicked
    value = target.attr("value");
;
    //increment the value
    counter[parseInt(value)]++;

    $("img").attr({src:"./images/cat" + value +".png"});
    $("h5").html("Cat " +  value);
    $("p").html("counter"+ value);
});

Answer 3

您的变量counter包含字符串"counter1"，而且非数字（NaN）。

您不能像javascript ...

那样在php中使用变量变量

要实现您的需求，请使用以下内容：

eval(counter + '++;');

这将计算为字符串"counter1++;"并以javascript代码执行。

Answer 4

NaN表示“非数字”，因此您无法在Javascript中添加字符串。。为什么不稍后增加值，然后再使用concat计数器。

 .....
 counter = value;
 console.log("counter: " + counter);
 counter++; 
 console.log("counter: " + counter);
 ...
 $("p").html("counter"+value);
 ...

我可以看到你只在一个地方counter使用html()，所以最后只用+连接计数器和值。

连接字符串加上html元素的数值以增加变量

4 个答案: