使用.position在jQuery中查找元素的位置不起作用

问题描述

|| 我正在做一个简单的动画，方法是单击一个框，每次单击将其向右移动100px。我希望当它的位置达到400时，每次单击时它应向左移动100px。 我做了一个“ 0”，但控制台仅显示元素的初始位置，并且每次单击后都不会更新。 我也希望最终排名显示在ѭ1上，但它也不会更新。 这是为什么？ 非常感谢 jQuery的：

$(\'#someBox > a\').click(function(e){
    var thisElem = $(this),aPos = thisElem.position();

    thisElem.animate({ marginLeft: \'+=100px\' });

    if(aPos.left === 400){
        thisElem.animate({ marginLeft: \'-=100px\' });
    }

    console.log(\'finish pos: \' + aPos.left);

    $(\'#info\').text(aPos.left + \'px\');

    e.preventDefault();
});

HTML：

<div id=\"someBox\">
  <a href=\"#\">show</a>
  <span id=\"info\">10px</span>
</div>

CSS：

#someBox{
  position: relative;
  background: #EEF0EB;
  border: 1px solid #dedbd7;
  height: 300px;
  width: 500px;
}
#someBox a{
  display: block;
  color: #fff;
  font-weight: bold;
  border: 1px solid #099;
  background: #0C9;
  padding: 5px;
  width: 50px;
  text-decoration: none;
}
#info{
  display: block;
  font-size: 36px;
  color: #777;
  font-weight: bold;
  width: 100px;
  margin: 100px auto;
}

    

解决方法

        如何使用

.data()

方法使您的生活更轻松？

$(\'#somebox > a\').click(function(e){
    var $this = $(this);
    var rel = $this.data(\'rel\') || \'+=\';

    var step = 100,// amount to move each click
        min = 0,// minimum left movement
        max = 400;   // maximum right movement


    $this.animate({ marginLeft: rel + step + \'px\' },function(){
        var margin = parseInt($this.css(\'margin-left\'),10);
        if (margin <= min || margin >= max){
            $this.data(\'rel\',(rel == \'+=\' ? \'-=\' : \'+=\'));
        }
    });
});

演示     ,        将此添加到您的样式表：

#somebox a {
 position: relative;
}

然后在您的jQuery上显示

marginLeft

，将其更改为

left

。之后再进行一些调整，以使其显示适当的值。