点击一定次数后更改 div 背景

Question

我有一个显示按钮点击次数的脚本，我想在点击一定次数后更改另一个 div 的背景图片，在本例中为 5。此时点击amount 工作正常，但另一部分不会对此做出反应。如果我手动键入 5 作为 #click.

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

这是我目前拥有的：

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

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

<div id="clicks">0</div>
<div id="first">first</div>
<div id="button">click</div>

#first {
    width: 100px;
    height:100px;
}
.red {
    background:red;
}

Answer 1

每次点击修改后需要检查数值。您还应该将返回值与字符串进行比较：

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

Answer 2

试试这个：

$(function() {
  var count = 0;
  $('div').click(function() {
    if (count++ == 5) {
      $(this).addClass('red');
    }
  })
});

.red {
  background-color: red;
}
div {
  width: 100px;
  height: 100px;
  background-color: blue;
}

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<div></div>

Answer 3

增加值并在点击函数中检查它是否为 5。

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

您还可以使用模数和切换类每点击 5 次更改一次。

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

点击一定次数后更改 div 背景

Change div background after certain amounts of clicks

javascript

css

jquery

addclass

click