为什么我不能在Jquery Selector中使用变量？

我试着写了使用jQuery在JavaScript程序中，我可以用鼠标拖动按钮，源码如下：为什么我不能在Jquery Selector中使用变量？

<!DOCTYPE html> 
<html> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var i = 1 
    //  while (i < 6) { 
      $("#c"+i).mousedown(function(e) { 
       var isMove = true 
       var px = e.pageX 
       var py = e.pageY 
       x = parseInt($("#c"+i).css("right")) 
       y = parseInt($("#c"+i).css("bottom")) 
       $(document).mousemove(function(e) { 
        if (isMove) { 
         $("#c"+i).css({ 
          "right" : "" + (x - (e.pageX - px)) + "px", 
          "bottom" : "" + (y - (e.pageY - py)) + "px" 
         }) 
        } 
       }).mouseup(function() { 
        isMove = false 
       }) 
      }) 
    //  i++ 
    //  } 
     }) 
    </script> 
    <style type="text/css"> 
     .cell { 
      position: relative; 
      right: -100px; 
      bottom: -100px; 
      background-color: royalblue; 
      width: 40px; 
      height: 40px; 
      border-radius: 5px; 
      -webkit-box-shadow: 1px 1px 5px #666666; 
      -webkit-user-select: none; 
      margin: 10px; 
      display: inline-block; 
     } 
     .panel { 
      -webkit-user-select: none; 
     } 
    </style> 
    <body> 
     <div class="panel"> 
      <div class="cell" id="c1"></div> 
      <div class="cell" id="c2"></div> 
      <div class="cell" id="c3"></div> 
      <div class="cell" id="c4"></div> 
      <div class="cell" id="c5"></div> 
     </div> 
    </body> 
</html>

现在它工作得很好。然而，当我加入“而”语句进去，只有最后一个按钮可以拖到

<!DOCTYPE html> 
<html> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var i = 1 
      while (i < 6) { 
      $("#c"+i).mousedown(function(e) { 
       var isMove = true 
       var px = e.pageX 
       var py = e.pageY 
       x = parseInt($("#c"+i).css("right")) 
       y = parseInt($("#c"+i).css("bottom")) 
       $(document).mousemove(function(e) { 
        if (isMove) { 
         $("#c"+i).css({ 
          "right" : "" + (x - (e.pageX - px)) + "px", 
          "bottom" : "" + (y - (e.pageY - py)) + "px" 
         }) 
        } 
       }).mouseup(function() { 
        isMove = false 
       }) 
      }) 
      i++ 
      } 
     }) 
    </script> 
    <style type="text/css"> 
     .cell { 
      position: relative; 
      right: -100px; 
      bottom: -100px; 
      background-color: royalblue; 
      width: 40px; 
      height: 40px; 
      border-radius: 5px; 
      -webkit-box-shadow: 1px 1px 5px #666666; 
      -webkit-user-select: none; 
      margin: 10px; 
      display: inline-block; 
     } 
     .panel { 
      -webkit-user-select: none; 
     } 
    </style> 
    <body> 
     <div class="panel"> 
      <div class="cell" id="c1"></div> 
      <div class="cell" id="c2"></div> 
      <div class="cell" id="c3"></div> 
      <div class="cell" id="c4"></div> 
      <div class="cell" id="c5"></div> 
     </div> 
    </body> 
</html>

那么，为什么它发生了，我怎么能解决这个问题？

来源

2016-01-19 Zhang MW

你应该尝试jQuery UISee here

HTML

<div id="draggable" class="ui-widget-content"> 
    <p>Drag me around</p> 
</div>

CSS

#draggable { width: 150px; height: 150px; padding: 0.5em; }

jQuery的

$(function() { 
    $("#draggable").draggable(); 
});

来源

2016-01-19 15:33:36

jQuery UI的可能是更好的解决方案，但在这里就是为什么你的脚本不工作：

x = parseInt($("#c"+i).css("right")) 
    y = parseInt($("#c"+i).css("bottom"))

在您执行这一点上，i不再是1,2,3,4,5 。这是6 i是在你的循环之外声明的，你试图在你的异步事件处理程序中使用它。把一个alert(i)放在那里，你会明白我的意思：循环在事件被触发前完成，如果它会有循环允许的最后一个值。

你应该不是这样：

x = parseInt($(this).css("right")) 
    y = parseInt($(this).css("bottom"))

来源

2016-01-19 15:37:20 Draco18s

非常感谢你，你彻底解决我的问题。 –

为什么我不能在Jquery Selector中使用变量？

回答

相关问题