为什么CSS类规则在一个案例中受到尊重而在另一个案例中却没有？ [英] Why are the CSS class rules respected in one case but not the other?
本文介绍了为什么CSS类规则在一个案例中受到尊重而在另一个案例中却没有？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在这个jsfiddle（http://jsfiddle.net/clayshannon/nVQ9E/1/）中，我有两个手风琴折叠，分配了不同的数据，但是具有相同的类，它们应该将它们填充的复选框对齐为四个列。在第二个手风琴折叠（站点）的情况下，它确实这样做;在另一个的情况下，虽然（Depts），它只使用三列？
为什么会这样？在其他小提琴（如http://jsfiddle.net/jakecigar/ktPWK/7/）中，使用各种列类可以很好地工作。
HTML
< h1 > 收据报告标准< / h1 >
< form >
< fieldset >
< 图例 > 日期范围< /图例 >
< label for = BeginDate class = staticLabel > 开始日期< / label >
< 输入 < span class =code-attribute> id = BeginDate / > ;
< 标签 = BeginTime class = staticLabel > 开始时间< / label >
< 输入 id = BeginTime / >
< br / >
< label for = EndDate class = staticLabel > 结束日期< / label >
< 输入 id = EndDate / >
< label for = EndTime class = staticLabel > 结束时间< / label >
< 输入 id = EndTime / >
< / fieldset &g t;
< br / >
< label = UPC class = < span class =code-keyword> staticLabel > UPC以< 开头 / label >
< 输入 id = UPC / >
< ; br / >
< br / >
< div id = accordion >
< h3 id = deptHeader > 部门< / h3 >
< div id = depts class = checkboxGroups4Col >
< / div >
< h3 < span class =code-attribute> id = sitesHeader > 网站< / h3 >
< div id = sites class = checkboxGroups4Col >
< / div >
< / div >
< br / >
< input type = 提交 value = 查看报告 class = submitButton > < / button >
< / form >
CSS
h1 {
color ： <跨度class =code-keyword> chocolate;
font-family ： 'Segoe UI Light';
}
body {
< span class =code-attribute> background-color ： oldlace;
}
表格 {
background-color ： whitesmoke;
}
图例 {
font-family ： 'Century Gothic'， Verdana，Georgia，sans-serif;
font-size ： 1.2em;
color ： navy;
}
。 staticLabel {
display ： inline-block;
width ： 140px;
margin-right ： 2px;
text-align ： right;
font-family ： < span class =code-keyword> Consolas，Candara，sans-serif;
}
。 checkboxGroups1Col { width ： 200px; margin-bottom ： 10px; border ： 1px solid chocolate ; }
。 checkboxGroups2Col { width ： 400px; margin-bottom ： 10px; border ： 1px solid chocolate; }
。 checkboxGroups3Col { width ： 600px; margin-bottom ： 10px; border ： 1px solid chocolate; }
。 checkboxGroups4Col { width < span class =code-keyword>： 800px; margin-bottom ： 10px; border ： 1px solid chocolate; }
。 checkboxGroups5Col { width ： 1000px; margin-bottom ： 10px; border ： 1px solid chocolate; }
label { display ： inline-block; width ： 200px; }
＃ depts ，＃ sites {
min-height < span class =code-keyword>： 200px;
}
。 submitButton {
background-color ： 海军;
颜色 ： 白色;
font-size ： 1.2em;
margin-top ： 15px;
}
jQuery
插件代码
（ function （$）{
$ .fn.extend（{
appendAllCheck： function （） {
var selectors = $（' < ; div class =selectors>< / div>'）。appendTo（ this ）
.append（ < button>全选< / button>< button>取消全选< / button>'）;
selectors.find（' button'）。click（功能（）{
var checked = $（ this ） .text（）== ' 全选';
$（ this ）。nearest（' .selectors'）。parent（ ）
.find（' [name]：checkbox'）。prop（' 选中'，已选中）;
$（ this ).prop(' 选中'， false ）;
return 假;
}）;
返回 此;
}，
appendCheckboxes： function （名称，标签）{
var container = this ;
$ .each（labels， function （i，l）{
var label = $ .isPlainObject（labels）？i：l，
value = $ .isPlainObject（labels）？l：i;
$（'' < label>'）。append（
$（' < input>'，{
' type'：' 复选框'，
' name'：name
}）。val（value），
label）.appendTo（container）;
} ）;
返回 此;
}，
checkedBoxes： function （）{
return < span class =code-keyword> this .find（' ：checked'） .map（ function （）{
return $（ this ）。parent（）。text（）;
}）。get（）;
}
}）;
}）（jQuery）;
常规旧jQuery代码
< pre lang =Javascript> var deptsArray = [];
for （ var i = 2 ; i< 100 ; i ++）{
deptsArray.push（i）;
}
var sitesArray = [];
for （ var i = 1 ; i< 7 ; i ++）{
sitesArray.push（i）;
}
$（' ＃BeginDate，＃EndDate' ）。日期选择器（）;
$（' ＃accordion'）。accordion（）;
$（' button'）。button（）;
$（' ＃depts'）。appendAllCheck（）。appendCheckboxes（ deptsCheckboxList'，deptsArray）;
$（' ＃sites'）。appendAllCheck（）。appendCheckboxes（ sitesCheckboxList'，sitesArray）;
解决方案
）{
.fn.extend（{
appendAllCheck： function （）{
var selectors =
（' < div class =selectors>< / div>'） .appendTo（ this ）
.append（' < button>全选< / button>< button>取消全选< / button>'）;
selectors.find（'' button'）。点击（ function （）{
var checked =
In this jsfiddle (http://jsfiddle.net/clayshannon/nVQ9E/1/) I have two accordion folds that are assigned different data, but have the same class, which should align the checkboxes they are populated with in four columns. In the case of the second accordion fold (Sites), it does do that; in the case of the other, though (Depts), it only uses three columns?
Why would that be? In other fiddles (such as http://jsfiddle.net/jakecigar/ktPWK/7/) using the various column classes works perfectly.
HTML
<h1>Receipt Report Criteria</h1>
<form>
<fieldset>
<legend>Date Range</legend>
<label for="BeginDate" class="staticLabel">Begin Date</label>
<input id="BeginDate" />
<label for="BeginTime" class="staticLabel">Begin Time</label>
<input id="BeginTime" />
<br/>
<label for="EndDate" class="staticLabel">End Date</label>
<input id="EndDate" />
<label for="EndTime" class="staticLabel">End Time</label>
<input id="EndTime" />
</fieldset>
<br/>
<label for="UPC" class="staticLabel">UPC Starts with</label>
<input id="UPC" />
<br/>
<br/>
<div id="accordion">
<h3 id="deptHeader">Departments</h3>
<div id="depts" class="checkboxGroups4Col">
</div>
<h3 id="sitesHeader">Sites</h3>
<div id="sites" class="checkboxGroups4Col">
</div>
</div>
<br/>
<input type="submit" value="View Report" class="submitButton"></button>
</form>
CSS
h1 {
color: chocolate;
font-family:'Segoe UI Light';
}
body {
background-color: oldlace;
}
form {
background-color: whitesmoke;
}
legend {
font-family:'Century Gothic', Verdana, Georgia, sans-serif;
font-size: 1.2em;
color: navy;
}
.staticLabel {
display: inline-block;
width: 140px;
margin-right: 2px;
text-align: right;
font-family: Consolas, Candara, sans-serif;
}
.checkboxGroups1Col { width: 200px; margin-bottom: 10px; border: 1px solid chocolate; }
.checkboxGroups2Col { width: 400px; margin-bottom: 10px; border: 1px solid chocolate; }
.checkboxGroups3Col { width: 600px; margin-bottom: 10px; border: 1px solid chocolate; }
.checkboxGroups4Col { width: 800px; margin-bottom: 10px; border: 1px solid chocolate; }
.checkboxGroups5Col { width: 1000px; margin-bottom: 10px; border: 1px solid chocolate; }
label { display: inline-block; width: 200px; }
#depts, #sites {
min-height: 200px;
}
.submitButton {
background-color: Navy;
color: white;
font-size: 1.2em;
margin-top: 15px;
}
jQuery
Plugin code
(function ($) {
$.fn.extend({
appendAllCheck: function () {
var selectors = $('<div class="selectors"></div>').appendTo(this)
.append('<button>Select all</button><button>Deselect all</button>');
selectors.find('button').click(function () {
var checked = $(this).text() == 'Select all';
$(this).closest('.selectors').parent()
.find('[name]:checkbox').prop('checked', checked);
$(this).prop('checked', false);
return false;
});
return this;
},
appendCheckboxes: function (name, labels) {
var container = this;
$.each(labels, function (i, l) {
var label = $.isPlainObject(labels) ? i : l,
value = $.isPlainObject(labels) ? l : i;
$('<label>').append(
$('<input>', {
'type': 'checkbox',
'name': name
}).val(value),
label).appendTo(container);
});
return this;
},
checkedBoxes: function () {
return this.find(':checked').map(function () {
return $(this).parent().text();
}).get();
}
});
})(jQuery);
"Regular old" jQuery code
var deptsArray = [];
for (var i = 2; i < 100; i++) {
deptsArray.push(i);
}
var sitesArray = [];
for (var i = 1; i < 7; i++) {
sitesArray.push(i);
}
$('#BeginDate, #EndDate').datepicker();
$('#accordion').accordion();
$('button').button();
$('#depts').appendAllCheck().appendCheckboxes('deptsCheckboxList', deptsArray);
$('#sites').appendAllCheck().appendCheckboxes('sitesCheckboxList', sitesArray);
解决方案
) {
.fn.extend({ appendAllCheck: function () { var selectors =
('<div class="selectors"></div>').appendTo(this) .append('<button>Select all</button><button>Deselect all</button>'); selectors.find('button').click(function () { var checked =
这篇关于为什么CSS类规则在一个案例中受到尊重而在另一个案例中却没有？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
