解决方案

Question

如何在第三次点击div后创建警报？我已经尝试了一些例子，但未能使其正常工作。

到目前为止的代码（没有计数部分）：

$("div").one( "click", function() {
 $(this).css({
  background: "red",
  cursor: "auto",
 });
 $(this).append( "0" );
 $("span").append( "0" );
});

小提琴http://jsfiddle.net/7gosayyo/

Answer 1

需要使用一些JavaScript来跟踪点击次数。

<button onclick="clicking()>Click me</button> 


var nClicks    = 0;
var nMaxClicks = 3;

function Clicking() {
    // increment the counter each time item is clicked
    nClick++;

    // On the 3rd click....
    if (nClicks == nMaxClicks){
       // Enter code for thing you are looking to do
       alert("Max clicks hit! " + nClicks);   
    }
}

Answer 2

解决方案

我们为div分配了一个新属性，它保存了我点击它的次数（以保存额外的全局变量）。一旦三次，我们就会显示警告信息。

<html>
    <head>
        <script>
            function clickMe(e){
                e.clicked = (e.clicked || 0) + 1;

                if (e.clicked === 3) alert('Three times'); //Replace with (e.clicked % 3 === 0) if required.
            }
        </script>
    </head>

    <body>
        <div onclick = 'clickMe(this)'>Click me three times</div>
    </body>
</html>

如果你想在第三次点击时获得警报（也是第六次，第九次，......），请用以下内容替换该行：

if (e.clicked % 3 === 0) alert('Three times');

修改

根据要求添加小提琴： https://jsfiddle.net/19jy296L/

Answer 3

这是你期待的吗？

http://jsfiddle.net/b1h4y9xL/

var click_count = 0;

$("div").on( "click", function() {
  click_count++;
   $(this).css({
    background: "red",
    cursor: "auto",
  });
  $(this).append( "0" );
  $( "span" ).append( "0" );
    if(click_count == 3){
        click_count = 0;
        alert('You have clicked three times!');
    }
});

您可以跟踪变量中单击框的次数，并在三次变换时重置它。然后，每次单击时，它只会检查您是否获得了三次点击。

Answer 4

不使用css方法，而是添加“点击”类。

然后，您可以检查该类是否有三个实例：

.clicked {
  background: red;
  cursor: auto;
}

$("div").one( "click", function() {
  $(this).addClass('clicked');
  $(this).append( "0" );
  $( "span" ).append( "0" );
  if($('div.clicked').length===3) {
    alert("Third time's the charm");
  }
});

div {
    width: 60px;
    height: 60px;
    margin: 5px;
    padding: 20px;
    float: left;
    background: green;
    cursor:pointer;
    color: #fff;
    text-align: center;
}
p {
    color: red;
}

.clicked {
  background: red;
  cursor: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click 3 squares...</p>
<span>$</span>

<br>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Answer 5

有几种方法可以实现这一点，一种方法是在单击的div中添加一个类，然后计算有多少div具有该类： As demonstrated here

$("div").one( "click", function() {
    $(this).addClass('clicked');
    $(this).append( "0" );
    $( "span" ).append( "0" );

    if( $('div.clicked').length == 3 ) {
        alert('hello!');
    }
});

另一个是在.one（）函数之外设置一个变量，并在每次执行时递增它，检查变量是否等于3，如果是，则显示警告。

Answer 6

这对你有用吗？

var ctr = 0;
$("div").on( "click", function() {
   $(this).css({
      background: "red",
      cursor: "auto",
   });
   $(this).append( "0" );
   $( "span" ).append( "0" );
   ctr++;
   if(ctr >= 3){
   alert("Clicked 3 times");
}});

Answer 7

如果您希望最多允许点击每个方块三次，则可以使用closures跟踪每个方块的剩余点击次数，如下例所示。

var clicksRemaining = 3;

$("div").on("click", function () {
    if (!clicksRemaining) {
        alert("You cannot click this square anymore.");
        return;
    }

    clicksRemaining -= 1;
    $(this).addClass("clicked");
    $(this).append("0");
    $("span").append("0");
});

如果您想在所有方块之间最多允许三次点击，可以使用以下代码。

col

Answer 8

这是一个简单的解决方案，基于每次点击附加到元素的类信息。您可以通过在var classes中添加一个类来触发任何点击，第三，第四，第五等事件，并检查该元素是否具有特定的点击次数类或通过监视当前类的位置在数组中。变量classes中的类名可以是任何字符串，您可以选择任何命名约定，但class中的类数决定了可以监视的最大点击次数

$('div').click(function () {
    var classes = ['first_click','second_click','third_click'];
    this.className = classes[($.inArray(this.className, classes)+1)%classes.length];   
    if ($.inArray(this.className, classes)+1 == 2){
       alert("second_click");        
    }
    if ($(this).hasClass('third_click')){
       alert("third click");        
    }

    $(this).append($.inArray(this.className, classes)+1);
    $( "span" ).append( $.inArray(this.className, classes)+1);
});

Demo on jsfiddle

在第三次点击计数后在div上创建警报

8 个答案:

解决方案

修改