Question

我正在影响CSS以进行绝对位置变化。

jQuery - 这会将绝对定位改为左上角和右上角，最终我想为所有角落做这件事，但我是从这个开始的

$('#topLeft').click(function() {
    $('#questionField').css('top', '0');
    $('#questionField').css('left', '0');
});

$('#topRight').click(function() {
    $('#questionField').css('top', '0');
    $('#questionField').css('right', '0');
});

HTML（不是我的所有ID都是正确的吗？）：

<body>
    <div id="questionField">    
        <form id="questions" action="process.html">
            <fieldset>
                <legend>Hello World!</legend>
                <p>Firstly, which corner would you like this question box to be in?</p>
                <input type="radio" name="corner" id="topLeft" /><label for="topLeft"> Top Left</label><br />
                <input type="radio" name="corner" id="topRight" /><label for="topRight"> Top Right</label><br />
                <input type="radio" name="corner" id="bottomLeft" /><label for="bottomLeft"> Bottom Left</label><br />
                <input type="radio" name="corner" id="bottomRight" /><label for="bottomRight"> Bottom Right</label><br />

                <p>Now, some questions.</p>
                <label for="color">Favorite Color: </label><input type="text" id="color" /><br />
                <label for="animal">Favorite Animal: </label><input type="text" id="animal" /><br />
            <label for="paintBrush">Favorite Paint Brush: </label><input type="text" id="paintBrush" /><br />
                <label for="movie">Favorite Movie: </label><input type="text" id="movie" />
            </fieldset>
        </form>
    </div>
</body>

CSS（如果我在没有jQuery的情况下手动影响它，它会起作用，但jQuery似乎不想影响它！）：

#questionField {
    position: absolute;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    padding: 10px;
}

Answer 1

您对内联样式的使用正在妨碍您。单击两个按钮后，jQuery在DIV上设置内联CSS样式，它看起来像这样：<div id="questionField" style="left: 0px; top: 0px; right: 0px; "> - “left：0”覆盖“right：0”并且它粘在左上角。< / p>

您需要在创建新内联样式之前删除旧内联样式，或者转换CSS类。我会推荐后者。试试这个：

$('#topLeft').click(function() {
    $('#questionField').removeClass().addClass('topleft');
});

$('#topRight').click(function() {
    $('#questionField').removeClass().addClass('topright');
});

CSS：

#questionField {
    position: absolute;
    padding: 10px;
}
.topleft {
    top: 0;
    left: 0;
}
.topright {
    top: 0;
    right: 0;
}

http://jsfiddle.net/mblase75/H8R6D/2/

添加底角现在很简单：http://jsfiddle.net/mblase75/H8R6D/3/

唯一的问题是，这将删除DIV上的所有所有类，包括您不想删除的类。如果这是一个问题，请将.removeClass()替换为.removeClass('topright bottomright bottomleft')（或类似的内容;它应该只列出您要删除的类）。

Answer 2

此外，当用户更改其偏好时，不要忘记将相反的定位css设置回默认值：

$('#questionField').css({
  'top': '0',
  'left': '0',
  'right': 'auto', // <--
  'bottom': 'auto' // <--
});

Answer 3

当您点击右上角时，您必须将left设置回auto，反之亦然。如果您只是更新对象CSS，那么您将left,top,right全部设置为零，而不仅仅是top,right。

更新

添加了一些代码和CSS：

    #questionField
    {
        position: absolute;
        padding: 10px;
        width: 500px;
    }
    div.topright
    {
        top: 0;
        right: 0;
    }
    div.topleft
    {
        top: 0;
        left: 0;
    }
    div.bottomright
    {
        bottom: 0;
        right: 0;
    }
    div.bottomleft
    {
        bottom: 0;
        left: 0;
    }

    $(document).ready(function () {
        $('#topLeft').click(function () {
            $('#questionField').removeClass('topright bottomright bottomleft').addClass('topleft');
        });
        $('#topRight').click(function () {
            $('#questionField').removeClass('topleft bottomright bottomleft').addClass('topright');
        });
        $('#bottomLeft').click(function () {
            $('#questionField').removeClass('topleft topright bottomright').addClass('bottomleft');
        });
        $('#bottomRight').click(function () {
            $('#questionField').removeClass('topleft topright bottomleft').addClass('bottomright');
        });
    });

Answer 4

有一些细微之处意味着你的代码虽然正确，却无法正常工作......

您的#questionField元素当前是100％宽，因此它已经触摸了页面的左侧（左侧：0）和页面的右侧（右侧：0）。您需要宽度小于100％才能看到从左到右的变化。
您应该设置position：absolute以使用元素的固定坐标
虽然这些调整可行（请参阅我的JS Fiddle）点击后，您可能会遇到奇怪的行为，例如，如果我点击左上角，然后是右上角，然后是左上角，那么顶部对了，当你左边都有混淆时，盒子会停止移动：0和右：0设置 - 它不能满足两个规则并且会选择坚持左边。您需要还原先前设置的属性才能使其正常工作。这是完整的工作代码（假设你在元素上放了一个宽度）。
```
 $(document).ready(function () {
    $('#topLeft').click(function() {
        $('#questionField').css({
            position: 'absolute',
            'top': '0px',
            'left': '0px',
            'right': 'auto'
        });
     });

     $('#topRight').click(function() {
        $('#questionField').css({
            position: 'absolute',
            'top': '0px',
            'right': '0px',
            'left': 'auto'
        });
    });
});
```

Answer 5

你应该填写一个int而不是一个字符串。

.css('top', 0);

Answer 6

如果未在 CSS

中定义，您还必须通过jQuery放置.css('position', 'absolute')

它会起作用，如果用其他值覆盖，只需添加！就像这样重要

.css('position', 'absolute !important');

我希望这会有所帮助。

Answer 7

你还没有真正说过什么不起作用，只是确保你在元素加载后调用jquery。

$(function(){
$('#topLeft').click(function() {
    $('#questionField').css('top', '0');
    $('#questionField').css('left', '0');
});

$('#topRight').click(function() {
    $('#questionField').css('top', '0');
    $('#questionField').css('right', '0');
});
});

另外，我不认为你的css需要声明元素的所有角落。顶级＆amp;左边就足够了。

Answer 8

这是因为你的div会拉伸整个页面。 Stick a background color on it and you'll see that like in this jsFiddle

它实际上是向右上方或左上方......但由于它太大了，它也击中了另一个角落。点击不同的单选按钮，最后指定right:0; left:0使您的宽度达到100％。您需要对其进行调整，使其在移动定位时不适合整个页面。

为什么这个用于使div转到右上角或左上角的jQuery代码不起作用？

8 个答案: