javascript - Jquery attr改变html结构

Question

我里面有jquery，我想在点击我的复选框时改变我的html结构 例如 : 当我选中我的复选框时，我的.col-md-4 col-md-push-2将更改为.col-md-6 当我取消选中它会恢复正常

这里是我的jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        $(".col-md-4").attr("class", "col-md-6");
        $(".col-md-push-2").attr("class", "");
    });
});
</script>

这是我的观点:

<div class="col-md-4 col-md-push-2 space business-fields yes box">
</div>
<div class="col-md-4 col-md-push-2 space business-fields yes box">
</div>

<input type="checkbox" id="try">

在那里，如果我选中它，我可以更改它，但是当我取消选中它时，我无法再次更改回来。

有人告诉我需要对代码进行哪些改进才能实现我的目标吗？

Answer 1

您可以切换这些类，例如:

$(document).ready(function(){
    var $colmd2 = $(".col-md-push-2");
    $('input[type="checkbox"]').change(function(){
        $(".col-md-4, .col-md-6").toggleClass("col-md-4 col-md-6");
        $colmd2.toggleClass("col-md-push-2");
    });
});