jQuery .show()添加style ="display:inline-block";到元素 [英] jQuery .show() adds style="display:inline-block" to elements
问题描述
我正在工作的网站上继承,该网站使用进度条/标签显示捐赠进度.清单中的大多数将有9年(例如1990-1999年),但最后一个有13年(2000-2012年).因此,我有一个javascript函数showHiddenBars()
,它显示/隐藏了各个元素.
在第一次加载时,所有内容都会正确显示(默认情况下显示2000-2012),但是在将它们隐藏然后显示之后,会弄乱布局.通过Google Chrome的检查器可以确定的是,当使用.show()
函数时,它会将style="display: inline-block"
添加到容纳标签的span元素中.我将jQuery UI的clip
缓动效果与show和hide函数一起使用.
如何防止.show添加style ="display:inline-block;"
完整的Javascript: http://pastebin.com/ZmbQqwWF
完整HTML: http://pastebin.com/mf6W1ahF
示例网站: http://kirsches.us/3000Strong/decadeProgress.html >
javascript:
function showHiddenBars() {
"use strict";
//show the bars we aren't using.
$('#decade10').show("clip");
$('#decade11').show("clip");
$('#decade12').show("clip");
$('#decade13').show("clip");
$('#decade10label').show("clip");
$('#decade11label').show("clip");
$('#decade12label').show("clip");
$('#decade13label').show("clip");
$('#decade10AmountGiven').show("clip");
$('#decade11AmountGiven').show("clip");
$('#decade12AmountGiven').show("clip");
$('#decade13AmountGiven').show("clip");
}
function hideHiddenBars() {
"use strict";
//hide the bars we aren't using.
$('#decade10').hide("clip");
$('#decade11').hide("clip");
$('#decade12').hide("clip");
$('#decade13').hide("clip");
$('#decade10label').hide("clip");
$('#decade11label').hide("clip");
$('#decade12label').hide("clip");
$('#decade13label').hide("clip");
$('#decade10AmountGiven').hide("clip");
$('#decade11AmountGiven').hide("clip");
$('#decade12AmountGiven').hide("clip");
$('#decade13AmountGiven').hide("clip");
}
HTML:
<div id="decadeProgressContainer">
<span class="titleFontNoBorder" id="decade1label">2000</span>
<div id="decade1" class="progressBarSpacingTop"></div>
<span id="decade1AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade2label">2001</span>
<div id="decade2" class="progressBarSpacing"></div>
<span id="decade2AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade3label">2002</span>
<div id="decade3" class="progressBarSpacing"></div>
<span id="decade3AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade4label">2003</span>
<div id="decade4" class="progressBarSpacing"></div>
<span id="decade4AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade5label">2004</span>
<div id="decade5" class="progressBarSpacing"></div>
<span id="decade5AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade6label">2005</span>
<div id="decade6" class="progressBarSpacing"></div>
<span id="decade6AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade7label">2006</span>
<div id="decade7" class="progressBarSpacing"></div>
<span id="decade7AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade8label">2007</span>
<div id="decade8" class="progressBarSpacing"></div>
<span id="decade8AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade9label">2008</span>
<div id="decade9" class="progressBarSpacing"></div>
<span id="decade9AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade10label">2009</span>
<div id="decade10" class="progressBarSpacing"></div>
<span id="decade10AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade11label">2010</span>
<div id="decade11" class="progressBarSpacing"></div>
<span id="decade11AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade12label">2011</span>
<div id="decade12" class="progressBarSpacing"></div>
<span id="decade12AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade13label">2012</span>
<div id="decade13" class="progressBarSpacing"></div>
<span id="decade13AmountGiven">$130,000</span>
</div>
<!--end div #decadeProgressContainer-->
以所需的方式明确设置可见性的样式:不要依赖hide()和show():
element.css('display', 'none'); equivalent of hide()
element.css('display', 'inline-block'); equivalent of show()
element.css('display', 'block'); What you want
I'm working on a site I inherited at work that shows donation progress using progress bars / labels. The majority of the lists will have 9 years in the (e.g. 1990-1999) but the last one has 13 (2000-2012). Because of this, I have a javascript function showHiddenBars()
which shows / hides the respective elements.
On first load, everything displays correctly (2000-2012 is displayed by default) but after hiding them and then showing them, it messes up the layout. From what I can tell via Google Chrome's inspector is that when the .show()
function is used it is adding style="display: inline-block"
to my span element which houses the label. I am using the clip
easing effect of jQuery UI with the show and hide functions.
How do I prevent .show from adding style="display: inline-block;"
Full Javascript: http://pastebin.com/ZmbQqwWF
Full HTML: http://pastebin.com/mf6W1ahF
Example Site: http://kirsches.us/3000Strong/decadeProgress.html
The javascript:
function showHiddenBars() {
"use strict";
//show the bars we aren't using.
$('#decade10').show("clip");
$('#decade11').show("clip");
$('#decade12').show("clip");
$('#decade13').show("clip");
$('#decade10label').show("clip");
$('#decade11label').show("clip");
$('#decade12label').show("clip");
$('#decade13label').show("clip");
$('#decade10AmountGiven').show("clip");
$('#decade11AmountGiven').show("clip");
$('#decade12AmountGiven').show("clip");
$('#decade13AmountGiven').show("clip");
}
function hideHiddenBars() {
"use strict";
//hide the bars we aren't using.
$('#decade10').hide("clip");
$('#decade11').hide("clip");
$('#decade12').hide("clip");
$('#decade13').hide("clip");
$('#decade10label').hide("clip");
$('#decade11label').hide("clip");
$('#decade12label').hide("clip");
$('#decade13label').hide("clip");
$('#decade10AmountGiven').hide("clip");
$('#decade11AmountGiven').hide("clip");
$('#decade12AmountGiven').hide("clip");
$('#decade13AmountGiven').hide("clip");
}
The HTML:
<div id="decadeProgressContainer">
<span class="titleFontNoBorder" id="decade1label">2000</span>
<div id="decade1" class="progressBarSpacingTop"></div>
<span id="decade1AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade2label">2001</span>
<div id="decade2" class="progressBarSpacing"></div>
<span id="decade2AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade3label">2002</span>
<div id="decade3" class="progressBarSpacing"></div>
<span id="decade3AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade4label">2003</span>
<div id="decade4" class="progressBarSpacing"></div>
<span id="decade4AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade5label">2004</span>
<div id="decade5" class="progressBarSpacing"></div>
<span id="decade5AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade6label">2005</span>
<div id="decade6" class="progressBarSpacing"></div>
<span id="decade6AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade7label">2006</span>
<div id="decade7" class="progressBarSpacing"></div>
<span id="decade7AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade8label">2007</span>
<div id="decade8" class="progressBarSpacing"></div>
<span id="decade8AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade9label">2008</span>
<div id="decade9" class="progressBarSpacing"></div>
<span id="decade9AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade10label">2009</span>
<div id="decade10" class="progressBarSpacing"></div>
<span id="decade10AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade11label">2010</span>
<div id="decade11" class="progressBarSpacing"></div>
<span id="decade11AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade12label">2011</span>
<div id="decade12" class="progressBarSpacing"></div>
<span id="decade12AmountGiven">$130,000</span><br />
<span class="titleFontNoBorder" id="decade13label">2012</span>
<div id="decade13" class="progressBarSpacing"></div>
<span id="decade13AmountGiven">$130,000</span>
</div>
<!--end div #decadeProgressContainer-->
Explicitly set the style for the visibility the way you want it: don't rely on hide() and show():
element.css('display', 'none'); equivalent of hide()
element.css('display', 'inline-block'); equivalent of show()
element.css('display', 'block'); What you want
这篇关于jQuery .show()添加style ="display:inline-block";到元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!