jquery -附加/分离多个divs
jquery -附加/分离多个divs
提问于 2017-06-16 06:51:27
我正在尝试替换复选框中的div的内容/。
HTML：
<div class="checks">
<input type="checkbox" class="section-1" value="section-1">check-1
<input type="checkbox" class="section-2" value="section-2">check-2
<input type="checkbox" class="section-3" value="section-3">check-3
<input type="checkbox" class="section-4" value="section-4">check-4
<input type="checkbox" class="section-5" value="section-5">check-5
<input type="checkbox" class="section-6" value="section-6">check-6
<input type="checkbox" class="section-7" value="section-7">check-7
</div><br><br>
<div class="divs">
<div class="section-1">
<div class="content-1">
div-1
</div>
</div>
<div class="section-2">
<div class="content-2">
div-2
</div>
</div>
<div class="section-3">
<div class="content-3">
div-3
</div>
</div>
<div class="section-4">
<div class="content-4">
div-4
</div>
</div>
<div class="section-5">
<div class="content-5">
div-5
</div>
</div>
<div class="section-6">
<div class="content-6">
div-6
</div>
</div>
<div class="section-7">
<div class="content-7">
div-7
</div>
</div>
</div>
<div class="divs-back" style="display: none">
<div class="section-1">
<div class="content-1">
div-1
</div>
</div>
<div class="section-2">
<div class="content-2">
div-2
</div>
</div>
<div class="section-3">
<div class="content-3">
div-3
</div>
</div>
<div class="section-4">
<div class="content-4">
div-4
</div>
</div>
<div class="section-5">
<div class="content-5">
div-5
</div>
</div>
<div class="section-6">
<div class="content-6">
div-6
</div>
</div>
<div class="section-7">
<div class="content-7">
div-7
</div>
</div>
</div>jQuery：
$(":checkbox:lt(7)").prop("checked", true);
var array = ["section-1", "section-2", "section-3", "section-4", "section-5", "section-6", "section-7"];
var unArray = [];
var unChecked = 0;
$('input[type="checkbox"]').click(function () {
if ($(this).prop('checked')) {
// Add the new element if checked:
if (array.indexOf($(this).val()) < 0) {
array.push($(this).val());
unChecked = unArray.slice(-1)[0];
unArray.splice(-1, 1);
}
} else {
// Remove the element if unchecked:
if (array.indexOf($(this).val()) >= 0) {
array.splice(array.indexOf($(this).val()), 1);
unArray.push($(this).val());
unChecked = 0;
}
}
showHideDiv($(this).val(), unChecked);
console.log(array);
console.log(unArray);
});
function showHideDiv(value, unCheked) {
console.log(unCheked);
if (unCheked != '0') {
$('.divs').find("." + unCheked).html($('.divs-back').find("." + value).html());
} else {
$('.divs').find("." + value).html('');
}
}第一次尝试成功地替换了内容。但在第二次尝试中，div内容的位置发生了更改，因此无法获得所需的输出。
小提琴手：https://jsfiddle.net/2th5gmLa/
编辑：，实际上，我不想只隐藏节目。我想替换上次未选中部分的div内容。当我取消选中Section-1、Section-2、Section-3时，如果我们检查section-1，那么它应该放在Section-3的DIV中。
回答 2
Stack Overflow用户
发布于 2017-06-16 06:57:48
为什么您的代码不能工作？
问题是你在推元素。push()方法将新项添加到数组的末尾，并返回新的长度。
//array.ush($(此).val())； 移除这一行
改变你必须做的.
$('input[type="checkbox"]').click(function() {
var unchkdArray = [];
var chkdArrray = [];
$('input[type="checkbox"]').map(function(){
if ($(this).is(':checked')) {
chkdArrray.push($(this).val())
} else {
unchkdArray.push($(this).val())
}
});
var selected = $(this).val()
if ($(this).is(':checked')) {
$('div.' + selected).show()
} else {
$('div.' + selected).hide()
}
});Stack Overflow用户
发布于 2017-06-16 07:09:01
试试这个..。
$(":checkbox:lt(7)").prop("checked", true);
var array = ["section-1", "section-2", "section-3", "section-4", "section-5", "section-6", "section-7"];
var unArray = [];
var unChecked = 0;
$('input[type="checkbox"]').click(function () {
console.log($(this)['context']['className']);
$( ".divs ."+$(this)['context']['className'] ).toggleClass( "hide" )
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44582663
复制相关文章
相似问题
腾讯云开发者
