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.