有8个div和一个空div。还有8个复选框。最初显示4个div,其余为display:none
,并选中4个复选框,其余为未选中
小提琴链接是here 这是我的代码
<div class="container">
<div class="empty" style="display:none;"></div>
<div class="content div_box_1">
<div class="box " style="background:black;"></div>
</div>
<div class="content div_box_2">
<div class="box " style="background:blue;"></div>
</div>
<div class="content div_box_3">
<div class="box " style="background:yellow;"></div>
</div>
<div class="content div_box_4">
<div class="box " style="background:orange;"></div>
</div>
<div class="content div_box_5">
<div class="box " style="background:pink; display:none;"></div>
</div>
<div class="content div_box_6">
<div class="box " style="background:indigo; display:none;"></div>
</div>
<div class="content div_box_7">
<div class="box " style="background:red; display:none;"></div>
</div>
<div class="content div_box_8">
<div class="box " style="background:skyblue; display:none;"></div>
</div>
<div class="checks">
<input type="checkbox" name="box1" checked value="1" class="css-checkbox"/>black
<input type="checkbox" name="box2" checked value="2" class="css-checkbox"/>blue
<input type="checkbox" name="box3" checked value="3" class="css-checkbox"/>yellow
<input type="checkbox" name="box4" checked value="4" class="css-checkbox"/>orange
<input type="checkbox" name="box5" value="5" class="css-checkbox"/>pink
<input type="checkbox" name="box6" value="6" class="css-checkbox"/>indigo
<input type="checkbox" name="box7" value="7" class="css-checkbox"/>red
<input type="checkbox" name="box8" value="8" class="css-checkbox"/>sky-blue
当我取消选中这4个复选框中的任何一个时,相应的div必须隐藏,并且必须显示class=empty
div,例如,如果我取消选中value=2
复选框,则必须隐藏带class="div_box_2
的div并且在那个地方必须显示包含class=empty
的div,并在选中value=5 or value=6 or value=7 or value=8
的复选框时再次显示,然后必须隐藏包含class=empty
的div,并且必须使用class=div_box_5 or class=div_box_6 or class=div_box_7 or class=div_box_8
的相应div显示在空div的位置。
它就像删除一个div并在该位置放置一个默认div,然后再显示一些其他div然后该div必须显示在默认div的位置
这怎么可能? 请任何人帮忙。 提前谢谢
答案 0 :(得分:2)
你需要的是一个空容器是每个内容元素。您可以使用脚本添加它
//add an empty container to all content elements
$('.container .content').append('<div class="empty" style="display:none;"></div>');
$("input.css-checkbox:checkbox").click(function () {
var cval = $(this).val();
var $div = $(".div_box_" + this.value).slideToggle("fast");
$div.next()[this.checked ? 'slideUp' : 'slideDown']("fast");
})
演示:Fiddle
答案 1 :(得分:0)
试试这个Demo
$(function() {
var selectCheckBox = $(".checks input:checkbox")
$(selectCheckBox).click(function() {
var checkingValue = $(this).val()
if(checkingValue == 1){
$('.div_box_1').toggle();
}
else if(checkingValue == 2){
$('.div_box_2').toggle();
}
else if(checkingValue == 3){
$('.div_box_3').toggle();
}
else if(checkingValue == 4){
$('.div_box_4').toggle();
}
})
var selectHiddenChecks = $('.checks input:checkbox')
$(selectHiddenChecks).click(function() {
var checkingValue = $(this).val();
if(checkingValue == 5) {
$('.div_box_5').toggle();
}
else if(checkingValue == 6) {
$('.div_box_6').toggle();
}
else if(checkingValue == 7) {
$('.div_box_7').toggle();
}
else if(checkingValue == 8) {
$('.div_box_8').toggle();
}
})
})
答案 2 :(得分:0)
修改强>
JSfiddle:click
我改变了一些事情:
让我解释一下JS:
var divs = [];
divs.push('<div class="content" id="empty">' +
'<div class="box div_box_0 empty"></div>' +
'</div>');
$('.box').each(function (index) {
divs[index+1] = $(this).parent();
$(this).parent().remove();
});
var selected = [];
var max_boxes = 4;
$('.css-checkbox').each(function () {
if ($(this).is(':checked') && selected.length < max_boxes) {
selected.push(divs[selected.length + 1]);
} else {
$(this).attr('checked', false);
}
});
while (selected.length < 4) {
selected.push(divs[0]);
}
for (var i in selected) {
$('.container').append(selected[i]);
}
$(".css-checkbox").click(function(){
if ($('.css-checkbox:checked').length > 4) {
$(this).attr('checked', false);
} else {
var cval = $(this).val();
var checked = $(this).is(':checked');
if (checked) {
var empty = $.inArray(divs[0], selected);
selected[empty] = divs[cval];
$('#empty').replaceWith(divs[cval]);
} else {
var filled = $.inArray(divs[cval], selected);
selected[filled] = divs[0];
$('.container').find(divs[cval]).replaceWith(divs[0]);
}
}
});
首先,我创建一个包含div的数组,以便您可以放置和替换它们。空div必须手动放入,因为您不止一次需要这个。在数组中,您将获得对元素的引用。接下来我删除你的HTML中的每个div。
接下来,我获取所选的框并将div按值放入所选数组中。之后,我将前4个选定的div添加到容器中。
点击功能会检查是否有4个框被点击,当您点击第5个框时,它会立即删除支票。接下来检查是否选中或取消选中该复选框。检查时,用所选的div替换第一个空div。如果取消选中,则用空div替换所选的div。