为什么这个用于制作div的jQuery代码转到右上角或左上角不起作用?
我正在影响CSS来改变绝对位置。为什么这个用于制作div的jQuery代码转到右上角或左上角不起作用?
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;
}
有一些细微之处意味着你的代码,而正确的,将无法正常工作......
你
#questionField
元素是目前广100%,所以它已经触及的左侧页面(左侧:0)和页面右侧(右侧:0)。您需要小于100%的宽度才能看到从左到右的变化。你应该设置位置:绝对使用固定坐标的元素
-
虽然这些调整将工作(见我JS Fiddle)一旦点击,你可能会得到奇怪的行为,例如,如果我点击左上角,右上角,然后左上角,然后右上角,当您左右两侧都选择左和右: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' }); }); });
你应该填充一个int而不是一个字符串。
.css('top', 0);
我不认为jQuery的关心。 –
它不..... –
@TimJoyce对不起:) –
你必须也把.css('position', 'absolute')
通过jQuery的,如果不是在CSS定义
它将工作,如果它的覆盖与另一个值只加!重要的是这样
.css('position', 'absolute !important');
我希望这可以帮助。
你还没有真正说过什么没有解决它,但只是确保你在元素加载后调用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,你需要声明元素的各个角落。顶部&左边应该是足够的。
但我最终想要纳入底部。而不工作,我的意思是当我点击单选按钮时,什么都没有发生。 –
您对内联样式的使用正在受到阻碍。点击两个按钮后,jQuery在DIV上设置内联CSS样式,它看起来像这样:<div id="questionField" style="left: 0px; top: 0px; right: 0px; ">
- “left:0”覆盖“right:0”并且它固定在左上角。
您需要在创建新内联样式之前删除旧的内联样式,或者切换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('topright bottomright bottomleft')
(或类似的东西替换.removeClass()
;它应只列出您要删除的的)。
我没有看到任何内联样式。 –
@TimJoyce'$('#questionField').css('left','0');'在DIV上设置内联样式。 – Blazemonger
在发布代码之前发表了评论。阅读它没有意义。现在有道理。 –
此外,不要忘记设置相对定位CSS回默认,当用户更改自己的喜好:
$('#questionField').css({
'top': '0',
'left': '0',
'right': 'auto', // <--
'bottom': 'auto' // <--
});
你将不得不设置left
回auto
当你点击了右上,反之亦然。如果你只是更新对象的CSS,你会有left,top,right
所有设置为零,而不是像你想的那样只需要top,right
。
UPDATE
添加一些代码,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');
});
});
这是因为你的DIV绵延整个页面。 Stick a background color on it and you'll see that like in this jsFiddle。
它实际上是右上或左上......但由于它非常巨大,所以它也碰到了另一个角落。通过点击不同的单选按钮,指定right:0; left:0
可使您的宽度达到100%。您需要对其进行调整,以便在移动它的位置时它不适合整个页面。
这真的很好。非常感谢你,正是我想要的。 快速的问题,如果我可以:1. .css({});东西覆盖CSS,或添加到它?我假设覆盖。 –
@DougSmith它只覆盖正在设置的CSS属性。其他的CSS属性是独立的,这是造成你的问题。这就是说:我不想自吹自擂,但是您应该尝试添加和删除类而不是单独的样式,因为它使代码更容易调整和管理,因为它越来越复杂。您不必担心覆盖不需要的CSS属性,因为当旧类被移除时它们会消失。 – Blazemonger
我同意在大多数情况下添加和删除类更容易管理长期,所以你可能希望适应该方法。当然,我的答案中有三个部分都对完成这项工作做出了贡献,而JavaScript只是其中的一部分。 – Fenton