单击View for MVC5分别更改所有按钮的颜色

Question

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

Answer 1

你可以用这样的jQuery来做到这一点：

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

另外，请注意，使用无效的方法最终会得到相同的ID（#vote）。 最好在按钮上使用一个类。