Question

我正在尝试在复选框的检查/取消检查事件中替换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内容的位置会发生变化，从而无法获得所需的输出。

JS-filldle：https://jsfiddle.net/2th5gmLa/

修改实际上，我不想隐藏节目。我想替换上一个未选中部分的div内容。当我取消选中Section-1，Section-2，Section-3时，如果我们检查section-1，那么它应该放在Section-3的DIV中。

Answer 1

为什么您的代码无效？

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

//的Array.push（$（本）.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()
  }
});

Fiddle Demo

Answer 2

试试这个......

Plunker Link

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


        });

Plunker Link

jquery - 附加/分离多个div onclick

2 个答案: