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）。最好在按钮上使用班级。

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

1 个答案: