Question

我的页面右侧有一个表格（id="efficacia"）。我写了这个JS脚本，以便左/右点击它

的JavaScript

$("#efficacia").click(function() {
    var posizione = $("#efficacia").position();

    if(posizione.right != 0) {
        $(this).animate({
            right: '0'
        }, 1000);
    } else {
        $(this).animate({
            right: '-202'
        }, 1000);
    }
});

CSS

#efficacia {
    position: fixed;
    right: -202px;
    top: 200px;
    cursor: pointer;
    z-index: 100;
}

我的脚本适用于第一个＆＃34;点击＆＃34;然后当我再次点击时它不会在202px的右边shitf。看起来该函数没有进入else statemet。

Answer 1

position().right不存在。只有顶部和左侧。 http://api.jquery.com/position/

将您的条件基于left属性并且它将起作用

Answer 2

您的代码中出现错误正确：＆＃39; -202＆＃39; 。您必须指定正确：＆＃39; -202px＆＃39; 。

这是更新后的代码：

$("#efficacia").click(function() {
   var right = $(this).css('right');

   if(right != "0px") {
       $(this).animate({
        right: '0px'
       }, 1000);
   } else {
       $(this).animate({
           right: '-202px'
       }, 1000);
   }
});

那是

Answer 3

如果您想获得所有角落的位置，那么您可以使用getBoundingClientRect()。它将返回div的bottom，right，left，top，width和height。但是，当然，它会返回从左上角开始的值。

var boundingBox = $(this).get(0).getBoundingClientRect();
console.log(boundingBox.right);

Read about getBoundingClientRect()

Answer 4

position不会返回right property。

您可以获取right css属性：

$("#efficacia").click(function() {
    var right = parseInt($(this).css('right'));

    if(right != 0) {
        $(this).animate({
            right: '0'
        }, 1000);
    } else {
        $(this).animate({
            right: '202'
        }, 1000);
    }
});

请参阅 DEMO 。

Answer 5

jQuery.position() 没有为style.right返回值。仅返回

Object{top: somVal, left: somVal} 所以如果你想获得正确的值，那么从样式属性

获取它

EG -

  $("#efficacia").click(function() {
       // var posizione = $("#efficacia").position();//here right is undefined
     var right=this.style.right.replace("px", "") * 1;//fetch value of right from style
        if(right != 0) {
            $(this).animate({
                right: '0' 
            }, 1000);
        } else {
            $(this).animate({
                right: '202'
            }, 1000);
        }
    });

脚本不会输入else语句

5 个答案: