在View for MVC5中单击更改所有按钮颜色

时间:2017-01-18 00:46:28

标签: javascript jquery html button asp.net-mvc-5

现在我有一个使用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;
}

1 个答案:

答案 0 :(得分:0)

你可以用这样的jquery做到这一点:

$('input[type="button"]').click(function () {
    $(this).addClass('clicked');
});

此外,请注意,您使用无效的方法最终得到相同的ID(#vote)。最好在按钮上使用班级。