现在我有一个使用foreach循环创建的按钮列表,用于获取数据库中的条目数量:
@model IEnumerable<myProject.Models.listItems>
@{
ViewBag.Title = "List";
}
<h2>List</h2>
@using (Html.BeginForm())
{
foreach (var item in Model){
<input id="vote" type="button" value="Vote" position="relative" class="btn btn-primary" style="width:150px; float:right" onclick="changeColor()"/>
}
}
我希望能够在点击时更改按钮颜色,目前我正在使用这些javascript代码来执行此操作
<script type="text/javascript">
var voteBtn = document.getElementById('vote');
voteBtn.onclick = function changeColor() {
if($(this).hasClass('clicked')){
$(this).removeClass('clicked');
$(this).addClass('un-clicked');
$(this).val('Vote');
} else {
$(this).removeClass('un-clicked').addClass('clicked');
$(this).val('VOTED');
}
}
现在的问题是我只能改变第一个按钮的颜色。 例如。如果我的数据库中有5个条目,我将有5个按钮,但只有第一个按钮会在点击时改变颜色,其余按钮没有响应。 而且我不确定我能做些什么来修复它。
这也是我的css:
.clicked{
background-color:#D8173B !important;
}
.unclicked{
background-color:Highlight !important;
}
答案 0 :(得分:0)
你可以用这样的jquery做到这一点:
$('input[type="button"]').click(function () {
$(this).addClass('clicked');
});
此外,请注意,您使用无效的方法最终得到相同的ID(#vote)。最好在按钮上使用班级。