单击时出现 JavaScript NaN 问题

Question

我有以下脚本：

function rotateFoo(current) {
  var angle = (current.data('angle') + 90);
  current.data('angle', angle);
  console.log('angle: ', angle);
  current.css({
    'transform': 'rotate(' + angle + 'deg)'
  });

  current.data('angle1', angle);
}

$(document).ready(function() {
  function generateNumb() {
    var start = [0, 90, 180, 270];
    var start = start[Math.floor(Math.random() * 4)];
    return start;
  }

  $('.foo').each(function() {
    $(this).css({
      'transform': 'rotate(' + generateNumb() + 'deg)'
    });
  });

  $('.foo').on('click', function() {
    rotateFoo($(this));
  });
});

.wrapper {
  width: 306px;
  border: 3px solid black;
  margin: 50px auto 0;
  overflow: hidden;
}
.foo {
  width: 100px;
  height: 70px;
  background-color: #faa;
  transition: all .5s ease;
  float: left;
  cursor: pointer;
  text-align: center;
  padding-top: 30px;
  border: 1px solid #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section class="wrapper">
  <div class="foo">1</div>
  <div class="foo">2</div>
  <div class="foo">3</div>

  <div class="foo">4</div>
  <div class="foo">5</div>
  <div class="foo">6</div>

  <div class="foo">7</div>
  <div class="foo">8</div>
  <div class="foo">9</div>
</section>

<p>
</p>

这是一个非常简单的益智游戏原型。 https://jsfiddle.net/dg0ugws1/70/

它从每个图块的随机角度开始。但是当我点击它时，我想将它顺时针旋转 90 度。

但是我的 console.log 抛出了这个错误：

angle:  NaN

Answer 1

这是因为在初始旋转时，您没有将任何 data('agle') 设置为元素，并且在单击时会得到 undefined + 90

function rotateFoo(current){
		
    var angle = (current.data('angle') + 90);
    current.data('angle', angle);
    console.log('angle: ', current.data('angle'));
    current.css({'transform': 'rotate(' + angle + 'deg)'});
    
    current.data('angle1', angle);
}

$(document).ready(function(){
	  
    function generateNumb() {
    var start = [0, 90, 180, 270];
    	var start = start[Math.floor(Math.random() * 4)];
      
      return start;
    }
  	
  $('.foo').each(function(){
        var angle = generateNumb();
		$(this).css({'transform': 'rotate(' + angle + 'deg)'}).data('angle', angle);
  });
  
  $('.foo').on('click', function(){
    rotateFoo($(this));
  });
  
});

body {
    font-family: sans-serif;
}

button {
  width: 180px;
  height: 80px;
  padding: 10px;
  cursor: pointer;
  font-size: 20px;
}

.wrapper {
  width: 306px;
  border: 3px solid black;
  margin: 50px auto 0;
  overflow: hidden;
}

.foo {
    width:100px;
    height:70px;
    background-color:#faa;
    transition: all .5s ease;
    float: left;
    cursor: pointer;
    text-align: center;
    padding-top: 30px;
    border: 1px solid #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section class="wrapper">
<div class="foo">1</div>
<div class="foo">2</div>
<div class="foo">3</div>

<div class="foo">4</div>
<div class="foo">5</div>
<div class="foo">6</div>

<div class="foo">7</div>
<div class="foo">8</div>
<div class="foo">9</div>
</section>

<p>
</p>

Answer 2

你只需要改变这个

    $('.foo').each(function(){
      $(this).css({'transform': 'rotate(' + generateNumb() + 'deg)'});
    });

与

   $('.foo').each(function(){
      var ang =  generateNumb();
      $(this).css({'transform': 'rotate(' + ang + 'deg)'});
      $(this).data('angle', ang);
   });

这样角度值就设置好了。