Javascript 单击一定数量后更改div背景

我有一个显示按钮点击量的脚本，我想在点击一定量后更改另一个div的背景图像，在本例中是5。目前，点击量工作正常，但其他部分不会对此作出反应。如果我手动键入5作为

#单击
的起始值，则第二个代码有效

这就是我到目前为止所做的：

$('#button').click(function () {
    $('#clicks').html(function (i, val) {
        return val * 1 + 1
    });
});

if ($('#clicks').html() == 5) {
    $("#first").addClass('red');
}

0
第一
点击

#首先{
宽度：100px；
高度：100px；
}
瑞德先生{
背景：红色；
}
每次单击修改后，需要检查值。还应将返回值与字符串进行比较：

 $('#button').click(function () {
     $('#clicks').html(function (i, val) {
       return val * 1 + 1
     });
    //check for new value
    if ($('#clicks').html() == "5") {
      $("#first").addClass('red');
    }
 });

试试这个：


$（函数（）{
var计数=0；
$（'div'）。单击（函数（）{
如果（计数+==5）{
$（this.addClass（'red'）；
}
})
});

.red{
背景色：红色；
}
div{
宽度：100px；
高度：100px；
背景颜色：蓝色；
}
增加该值，并检查单击功能中的值是否为5

$('#button').click(function () {
    $('#clicks').html(function (i, val) {
        val++;
        if (val == 5)
            $("#first").addClass('red');
        return val;
    });
});

您还可以使用Modular和toggleclass每隔5次单击更改一次

$('#button').click(function () {
    $('#clicks').html(function (i, val) {
        val++;
        if (val % 5 == 0)
            $("#first").toggleClass('red');
        return val;
    });
});

谢谢花了一段时间来解决实际问题，但无论如何，它还是奏效了！谢谢我可能会在这里补充一点，我从来都不知道添加一个具有不同背景图像的类不会取代之前的一个（？），或者是我使用了背景标记而不是背景图像？