jQuery attr更改结构html
[英]Jquery attr change structure html
问题描述
我在其中有jquery，例如，当我单击checkbox时，我想更改html的结构：当我选中checkbox .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">
在这里，如果我选中它，则可以更改它，但是当我取消选中它时，我无法更改该方法。
有人告诉我我必须对代码进行哪些改进才能实现我的目标？
4 个解决方案
解决方案1
1 2016-07-21 09:37:49
您可以切换这些类，例如：
$(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");
});
});
解决方案2
0 2016-07-21 09:35:13
替代选项。 用这个：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('input[type="checkbox"]').change(function () {
if($(this).is(":checked")){
$(".space").addClass("col-md-6").removeClass("col-md-4 col-md-push-2");
}else{
$(".space").removeClass("col-md-6").addClass("col-md-4 col-md-push-2");
}
});
});
</script>
解决方案3
0 2016-07-21 09:47:48
我认为这正是您正在寻找的...当取消选中返回col-md-4时添加col-md-6
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('input[type="checkbox"]').click(function(){ if($(this).prop("checked") == true){ $(".col-md-push-2").addClass("col-md-6"); $(".col-md-push-2").removeClass("col-md-4"); } else if($(this).prop("checked") == false){ $(".col-md-push-2").addClass("col-md-4"); $(".col-md-push-2").removeClass("col-md-6"); } }); }); </script> </head> <body> <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"> </body> </html>
解决方案4
0 2016-07-21 09:51:14
试试这个代码..
$('input[type="checkbox"]').click(function () {
if ($('input[type="checkbox"]').prop('checked')) {
$('.col-md-4').addClass('col-md-6').removeClass('col-md-4 col-md-push-2')
}
else {
$('.col-md-6').addClass('col-md-4 col-md-push-2').removeClass('col-md-6')
}
});
jQuery-更改href属性
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.