如果div多次点击,变量会创建多个输入吗?

时间:2015-12-10 09:57:21

标签: javascript jquery

我无法弄清楚这一点。发生了什么事情,当我点击playerMove()中的div时,它应该使var clickedId成为id。如果我单击一个div然后单击另一个div,它可以工作,但是如果我单击相同的div两次,则变量加倍并添加一个。例如:

第一次点击= 3 第二次点击= 4 这很好用

第一次点击= 3 第二次点击= 3 这会产生类似var clickedId = 3 3 3 3

的内容

这是小提琴jsfiddle.net/61cyw2s8

$(document).ready(function() {
    //Global Arrays
    var player = [];
    var comp = [];

    //function for RandomInt 1-4  
    function randomInt() {
        return Math.floor(Math.random() * (4 - 1 + 1) + 1);
    }

    //hover function
    function hover(value) {
        $("#" + value).addClass("hover");
        setTimeout(function() {
            $("#" + value).removeClass("hover");
        }, 500);
    };

    //Comp Move
    var hoverCount = 0

    function addCompMove() {
        comp.push(randomInt());
        compHover();

    }

    function compHover() {
        setTimeout(function() {
            console.log(hoverCount);
            hover(comp[hoverCount]);
            hoverCount++;
            if (hoverCount < comp.length) {
                compHover();
            }
        }, 1000)
        playerMove();
    };

    //Player Move 
    function playerMove() {
        $(".playbox").on("click", function() {
            var clickedId = parseInt(this.id);
            console.log(clickedId);
            player.push(clickedId);
            hover(clickedId);
            correctMove();
        })
    }
    //Testing
    function arrayEqual(arr1, arr2) {
        if (arr1.length !== arr2.length) {
            return false;
        }
        for (var i = arr1.length; i > -1; i--) {
            if (arr1[i] !== arr2[i])
                return false;
        }
        return true;
    };

    function correctMove() {
        if (arrayEqual(comp, player)) {
            hoverCount = 0;
            player.length = 0;
            addCompMove();
        } else {
            playerMove();
        }
    };
    //Start
    $("#start").bind("click", function() {
        addCompMove();
    });

});

3 个答案:

答案 0 :(得分:1)

检查数组是否重复$.inArray

//Player Move 
function playerMove(){
  $(".playbox").on("click", function(){
    var clickedId = parseInt(this.id);
    console.log(clickedId);
    if ($.inArray(clickedId, player) == -1){
       player.push(clickedId);
    }
    hover(clickedId);
    correctMove();
  }) 
}

答案 1 :(得分:1)

原来,对playerMove()的回调导致它将值加倍。我把它移到'.start'按钮功能中,它运行得很好。谢谢大家的帮助。

    $(document).ready(function(){
  //Global Arrays
 var player = [];
  var comp = [];
var hoverCount = 0;
  var clickedId = 0;
//function for RandomInt 1-4  
function randomInt()
{
    return Math.floor(Math.random()*(4-1+1)+1);
}

//hover function
function hover(value){
  $("#" + value).addClass("hover");
  setTimeout(function(){
    $("#" + value).removeClass("hover");
  }, 500);
};

//Comp Move

function addCompMove(){
 comp.push(randomInt());
  compHover();

}

 function compHover()
  {setTimeout(function (){ 
  hover(comp[hoverCount]);
  hoverCount++;
  if (hoverCount < comp.length){
    compHover();
    };    
  }, 1000);
  };

//Player Move 
function playerMove() {
    $(".playbox").on("click", function() {
     clickedId = parseInt(this.id);
        console.log(clickedId);
        player.push(clickedId);
        console.log(player)
        hover(clickedId);
        correctMove();
    });
}
  //Testing
function arrayEqual(arr1, arr2){
  if (arr1.length !== arr2.length){
    return false;
  }
  for (var i = arr1.length; i > -1; i--){
    if(arr1[i] !== arr2[i])
    return false;
  }
  return true;
}; 
function correctMove(){
  if(arrayEqual(comp, player)) {
     hoverCount = 0;
    player.length = 0;
     addCompMove();
     }
};
//Start
$("#start").bind("click", function(){
  addCompMove();
  playerMove();
});

});

答案 2 :(得分:0)

这是西蒙说的吗?太酷了。这是一个递归时间的练习(或者可能是setTimeout?)地狱:P

忽略之前的答案,我更多地考虑了你的问题并编写了2个函数来替换你的2个函数。

compArrays(arr1, arr2)替换arrayEqual(arr1, arr2)

这两个函数都给出了相同的结果,我只是不喜欢arrayEqual中的反向循环,它给了我heebee jeebees。 0_o如果数组相同并且顺序相同,则返回true。推荐用法:

var match = compArrays(player, comp);

function correctMove() {
    if (match) {
        hoverCount = 0;
        player.length = 0;
        addCompMove();
    } else {
        playerMove();
    }
}; 

randomInt(min, max)替换randomInt()

新的randomInt需要minmax来定义范围,参数是EXCLUSIVE,因此范围更好。在您的情况下,用法如下:

randomInt(0, 5);

这将返回1到4范围内随机生成的整数。

功能和测试在PLUNKER

/* compArrays(arr1, arr2) 
Compares 2 arrays, returns true if: elements are identical and in the same order
*/
function compArrays(arr1, arr2) {
  if (arr1.length !== arr2.length) return false;
  for (var i = 0, len = arr1.length; i < len; i++) {
    if (arr1[i] !== arr2[i]) {
      return false;
    }
  }
  return true;
}

//http://stackoverflow.com/a/22395370/2813224

/* randdomInt(min, max)
Returns a randomly genrated integer from a range determined by given parameters:
min and max are EXCLUDED (ex. range of 1 to 10, min=0 and max=11)
*/
function randomInt(min, max) {
    result = (Math.floor(Math.random() * max + (min + 1)) % max) || max;
    return result;
}

//http://stackoverflow.com/a/12523228/2813224

function test1() {
var arr1 = [3, 0, 1, 2];
var arr2 = [3, 0, 1, 2];
var arr3 = [3, 1, 0, 2];
var arr4 = [2, 1, null, 3];
var match = compArrays(arr1, arr2);
var order = compArrays(arr2, arr3);
var nul0 = compArrays(arr1, arr4);
console.log('arr1 and arr2 match: ' + match);
console.log('arr2 and arr3 match: ' + order);
console.log('arr1 and arr4 match: ' + nul0);
}

function test2(len) {
  var tmp = [];
  for (var i = 0; i < len; i++) {
    var ran = randomInt(0, 5);
    tmp.push(ran);
    console.log('Random 1 to 4: ' + ran);
  }
  console.log('Random array: ' + tmp.toString());
}


test1();
test2(8);

假设您实际上正在迭代playerMove(),并且每次迭代的结果都相同,那么您很可能需要递增返回值,因此请尝试递增clickedId

<德尔>     function playerMove(){         $(&#34; .playbox&#34;)。on(&#34; click&#34;,function(){             var clickedId = parseInt(this.id)= + 1; //尝试递增clickedId             的console.log(clickedId);             player.push(clickedId);             悬停(clickedId);             correctMove();         })     }