JQuery改变类

Question

我想在用户登录后调整我的mvc 5网站（bootstrap模板）的初始页面。登录后，主页面上将出现一个新的部分，我想更改所有其他标签的类，以便更好地适应主页的内容。 以下是我已添加到页面中的代码：

@using Microsoft.AspNet.Identity
@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron" style="background-color: lightblue">
    <table>
        <tr>
            <td style="width: auto"><img src="~/Images/aaaa.png" /></td>
            <td style="width: 5%">&nbsp;</td>
            <td align="left" valign="bottom"><h1>Title</h1></td>
        </tr>
        <tr><td colspan="3">&nbsp;</td></tr>
        <tr>
            <td colspan="3" align="left"><p class="lead">Description</p></td>
        </tr>
    </table>
</div>

<div class="row">
    <div id="div1" class="col-md-4">
        <h2>Menu1</h2>
        <p>
            BLA BLA BLA
        </p>
        <p>@Html.ActionLink("Leggi >>>", "Action1", "Controller1", new { }, new { target = "_self" })</p>
    </div>
    <div id="div2" class="col-md-4">
        <h2>Menu2</h2>
        <p>BLA BLA BLA</p>
        <p>@Html.ActionLink("Leggi >>>", "Action2", "Controller2", new { }, new { target = "_self" })</p>
    </div>
    <div id="div3" class="col-md-4">
        <h2>Menu 3</h2>
        <p>BLA BLA BLA</p>
        <p>@Html.ActionLink("Leggi >>>", "Action3", "Controller3", new { }, new { target = "_self" })</p>
    </div>
    @{
    if (Request.IsAuthenticated)
    {
        <div id="div4" class="col-md-3">
            <h2>Menu 4</h2>
            <p>BLA BLA BLA BLA</p>
            <p>Leggi >>></p>
        </div>
        @Scripts.Render("~/bundles/jquery") 
        <script>
            $(document).ready(function () {
                $(".col-mod-4").removeClass("col-mod-4").addClass("col-mod-3");
            });
        </script>
        }
    }
</div>

问题是这段代码不起作用。应用于对象的类不会更改。 我究竟做错了什么？拜托，有人可以帮帮我吗？ 提前谢谢。

Answer 1

您正在class中寻找html代码中不存在的jQuery。在html中，您有col-md- 4，例如<div id="div1" class="col-md-4">而不是{J}来查看jquery代码中的col-mod-4。检查css中的课程，并相应地更改 html / css 。我假设您有col-md-3而不是col-mod-3

更改

$(".col-mod-4").removeClass("col-mod-4").addClass("col-mod-3");

到的

$(".col-md-4").removeClass("col-md-4").addClass("col-md-3");

Answer 2

您也可以尝试以下操作：

$(".oldclass").attr('class','').addClass("newclass");