Javascript 使用jQuery更改模式中的引导类

我想用jQuery更改引导模式内容（引导类）。我想用col-xs-12替换col-xs-8。这是我的密码：

index.php

<div id="regModal" class="modal fade" role="dialog">
    <div id="login-overlay" class="modal-dialog firstReg rtl">
        <div class="modal-content">
            <div class="login-modal">
                <div class="modal-header"></div>
                <div class="modal-body">
                        <div class="col-xs-4">
                        .
                        .
                        .
                        </div>
                        <div id = "#main-form" class="col-xs-8">
                            <p> 111111111</p>
                            <p class = "hidden"> 222222222</p>
                        </div>                      
                </div>
                <div class="modal-footer">
                  <p><a>click </a></p>

                 </div>
            </div>
        </div>
    </div>
</div>

我也用过

$("#regModal #main-form").attr('col-xs-8' , 'col-xs-12')

但第一种方法或第二种方法都不起作用，无法将col-xs-8扩展到col-xs-12。有什么建议吗

编辑：另外，我想在将col-xs-8更改为col-xs-12后显示第二个p。以下是我的css代码：

#regModal .hidden{
    visibility: hidden;
}

试试这个：

$("#regModal a").click(function(evt) {
  evt.preventDefault();
  var $col4 = $("#regModal .col-xs-4").fadeOut(2000);
  $col4.next().removeClass('col-xs-8').addClass('col-xs-12');

  var $firstChild = $col4.next().children().first().hide();
  $firstChild.next().fadeIn(2000);
});

我首先获取4列内容并将其存储在一个变量（

$col4

）中，同时调用

fadeOut

方法。因为我有一个对4列内容的引用，而8列内容是下一个同级，所以我可以使用

next

方法来查找元素并执行所需的操作

我使用相同的原理隐藏/显示12列元素的子

p

元素

您可以为

.col-xs-12

设置一些css规则，以便在应用类时提供更改的可视指示（如果您愿意）

---

在

#regModal

中没有

元素，这就是为什么
单击
事件不会触发的原因。@yas我已经更改了我的问题，请查看下面的答案。如果我提供的解决方案有任何问题，请告诉我。感谢您的回复。我再次编辑了我的问题。你能帮我完成这个吗？我想在将col-md-8更改为col-md-12后显示隐藏段落。
$("#regModal a").click(function(evt) {
  evt.preventDefault();
  var $col4 = $("#regModal .col-xs-4").fadeOut(2000);
  $col4.next().removeClass('col-xs-8').addClass('col-xs-12');

  var $firstChild = $col4.next().children().first().hide();
  $firstChild.next().fadeIn(2000);
});

.col-xs-12 {
  background-color: yellow;
}