通过类名找到 div 并根据 onclick - jquery 将其替换为 div

Question

有8个div和一个空的div。还有 8 个复选框。最初显示 4 div，其余 display:none，选中 4 个复选框，其余未选中

Fiddle link 是 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 的复选框时，div with class=empty 必须隐藏并且相应的 div with 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

这怎么可能？请任何人帮助。提前谢谢你

Answer 1

您需要的是一个空容器，其中包含每个内容元素。您可以使用脚本添加它

//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

Answer 2

试试这个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();
        }
    })
})

Answer 3

编辑

JSfiddle：click

我改变了一些东西：

我从您的 HTML 中删除了您的样式，并将其放入您的 CSS;
您想替换 div，因此无需隐藏任何内容；

让我解释一下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

通过类名找到 div 并根据 onclick - jquery 将其替换为 div

find a div by classname and replace it with a div based on onclick - jquery

javascript

jquery

find

toggle

show-hide