我正在写博客。现在我想要一个按钮,如果用户点击按钮,它将显示博客下的评论。我已经为它写了一个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事件调用此函数
我对堆栈溢出很新,所以如果可以告诉我更好的事情,请告诉我!
答案 0 :(得分:0)
感谢您提出的建议我尝试过Hopeless解决方案并且它有效。在这里答案:
新的javascript功能
function ShowComments(getId)
{
var Id = "Comm" + getId;
var CommId = document.getElementById(Id).className = "show";
}
我在这里做的是在两个类名之间切换以隐藏或显示评论
答案 1 :(得分:0)
你可以在你的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