Question

我有一个脚本，显示按钮的点击次数，我希望在一定量的点击后更改另一个div的背景图像，在这种情况下为5.此时点击量工作正常，但另一个部分不会对它做出反应。如果我手动输入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;
    });
});

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

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

在一定量的点击后更改div背景

3 个答案: