javascript - Div在asp.net中显示无/隐藏javascript函数

Question

我正在写博客。现在我想要一个按钮，如果用户单击该按钮，它将在博客下方显示评论。我已经为它编写了一个 javascript 函数，但由于某种原因它不起作用。我可以在网络检查器中看到该元素已设置为显示 block ，但它仍然不可见。

这是我的观点

@model IEnumerable<Portfolio.Models.Messages>

@{
ViewBag.Title = "Home Page";
}
<script src="~/Scripts/Comments.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/css/Blog.css" />

@foreach (var messages in Model)
{
    <div class="jumbotron opacity_container">
        <div class="col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h2 class="panel-title">
                        @messages.Title</h2>@messages.WhenCreated
                </div>
                    <div class="panel-body">
                 @Html.Raw(System.Web.HttpUtility.HtmlDecode(messages.Body))
                    </div>
              </div>
         </div>

<button class="btn btn-primary" id="@messages.MessagesId" 
onclick="ShowComments(this.id)">
Show Comments
</button>

    <div class="hidden" id="Comm@(messages.MessagesId)">
        @Html.Partial("_Comment")
        <button class="btn btn-primary" id="@messages.MessagesId" 
        onclick="HideComments(this.id)">
        Hide Comments</button>
    </div>
</div>
}

The div with the hidden class is the class that i want to turn visible

这是局部 View

@model IEnumerable<Portfolio.Models.Messages>
@{
    ViewBag.Title = "Home Page";
}
<link rel="stylesheet" type="text/css" href="~/Content/css/Blog.css" />

<div class="row" id="CommentContainer">
    <div class="col-md-12">
        <h2>Comments</h2>
        <button class="btn btn-primary" id="CommentButton1">
            Place Comment
        </button>
            <div class="row">
               <div class="col-md-10">
               @foreach(var messages in Model)
                {
                <div class="well" id="CommentBox">                       
                 @Html.Raw(System.Web.HttpUtility.HtmlDecode(messages.Body))
                </div>
                }
           </div>
        </div>
    </div>
</div>

这是CSS

body {
background-image: url('../images/blogbckgrnd.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center top;
}

.jumbotron.opacity_container {
    background-color: rgba(51, 53, 56, 0.6);
}

col-md-12.message {
    font-size: 0.5vw;
}

#MessageContainer {
    margin: 0vw;
}

#CommentButton{
margin: 0.4vh 0vw 1.5vh 1vw;
}

#CommentButton1 {
margin: 0.4vh 0vw 1.5vh 1vw;
}

#CommentBox {
background-color: gray;
}

.hidden {
display: none;
}

The hidden class sets the div to display none

这是 Javascript 函数

function ShowComments(getId)
{
    var Id = "Comm" + getId;
    var CommId = document.getElementById(Id);
    CommId.style.display = "block";
}

This function gets called with a onclick event from the button

我对堆栈溢出很陌生，所以如果可以更好地告诉我，请告诉我!

Answer 1

感谢您的建议，我已经尝试了 Hopeless 解决方案并且它奏效了。答案在这里:

新的javascript函数

    function ShowComments(getId)
    {
        var Id = "Comm" + getId;
        var CommId = document.getElementById(Id).className = "show";
    }

我在这里所做的是在两个类名之间切换以隐藏或显示评论