Question

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

这是我的观点

@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>
}

隐藏类的div是我想要变成可见的类

这是局部视图

@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;
}

隐藏类将div设置为不显示

这是Javascript函数

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

使用按钮
中的onclick事件调用此函数

我对堆栈溢出很新，所以如果可以告诉我更好的事情，请告诉我！

Answer 1

感谢您提出的建议我尝试过Hopeless解决方案并且它有效。在这里答案：

新的javascript功能

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

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

Answer 2

你可以在你的html页面中使用div和你的下拉列表中的javascript onchange函数...不需要重新加载任何东西

的CSS：

    .on {
    display: block;
    }
    .off {
    display: none;
    }

脚本看起来像那样或者关闭......

<script type="text/javascript">
        $(document).ready(function () {
            document.getElementById('DIV1').className = 'off';
            document.getElementById('DIV2').className = 'off';
        });      
    $('#DDL').on('change', function() {
       if ( this.value == '1')
       {
                document.getElementById('INF1').className = 'on';
                document.getElementById('INF2').className = 'off';
       }
       else if ( this.value == '2')
       {
                document.getElementById('INF1').className = 'off';
                document.getElementById('INF2').className = 'on';
       }
    etc.
   });
});

对于html，只需根据你的脚本放入id

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

2 个答案: