Javascript jquery-attach/detach多个div onclick

我正在尝试替换checkbox的检查/取消检查事件上的div内容

HTML:

检查-1
检查-2
支票-3
检查-4
支票-5
检查-6
支票-7



第一组
第2组
第3组
第4组
第5组
第6组
第7组
第一组
第2组
第3组
第4组
第5组
第6组
第7组

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('');
            }
        }

$（“：复选框：lt（7）”）.prop（“选中”，true）；
变量数组=[“第1节”、“第2节”、“第3节”、“第4节”、“第5节”、“第6节”、“第7节”]；
var unArray=[]；
var=0；
$（'input[type=“checkbox”]”）。单击（函数（）{
if（$（this.prop（'checked'））{
//如果选中，则添加新元素：
if（array.indexOf（$（this.val（））<0）{
array.push（$（this.val（））；
未选中=未排列的切片（-1）[0]；
未排列拼接（-1,1）；
}
}否则{
//如果未选中，请删除该元素：
if（array.indexOf（$（this.val（））>=0）{
splice（array.indexOf（$（this.val（）），1）；
unArray.push（$（this.val（））；
未选中=0；
}
}
showHideDiv（$（this）.val（），未选中）；
console.log（数组）；
控制台日志（未排列）；
});
函数showHideDiv（值，未勾选）{
控制台日志（未勾选）；
如果（未勾选！=“0”）{
$（'.divs'）.find（“.”+unchecked.html（$（'.divs back'）.find（“.”+value.html（））；
}否则{
$（'.divs'）.find（“.”+value.html（''）；
}
}

第一次尝试时，它正在成功替换内容。但是在第二次尝试中，div内容的位置被更改，因此无法获得所需的输出

jsfiddle：

编辑：

---

事实上，我不想只是隐藏表演。我想替换最后一个未选中部分上的div内容。当我取消选中

Section-1

，

Section-2

，

Section-3

，如果我们选中

Section-1

，那么它应该放在

Section-3

的DIV中，为什么你的代码不工作？

问题是你在推动这个元素。方法将新项添加到数组的末尾，并返回新的长度

//array.push（$（this.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()
  }
});

试试这个

---

没关系，先生@Rino Raj请换衣服it@IvinRaj如果你有任何建议，请留下评论。事实上，我不想只是隐藏表演。我想替换最后一个未选中部分上的div内容。如果没有选中Section-1、Section-2、Section-3，那么如果我们选中Section-1，那么它应该放在Section-3的DIV中。实际上，我不想只隐藏show。我想替换最后一个未选中部分上的div内容。如果未选中Section-1、Section-2、Section-3，那么如果我们选中Section-1，那么它应该放在Section-3的DIV中。

$('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()
  }
});

 $(":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" )


        });