按类名查找div并将其替换为基于onclick -jquery的div

时间:2015-04-30 06:29:32

标签: javascript jquery find toggle show-hide

有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的位置

这怎么可能? 请任何人帮忙。 提前谢谢

3 个答案:

答案 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

我改变了一些事情:

  • 我从您的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。