使用JavaScript和CSS为不同的操作选择文件

Question

我尝试通过选择文件来获取文件ID，并将其传递给操作链接以进行预览，删除或详细信息。贝娄是我到目前为止的代码：

HTML代码：

<div>
@foreach (var item in Model)
{
    <div class="images_list">
        <ul>
            <li class="border" title="@item.Id">
                <img src="~/Images/@item.FileName" width="150" height="150" />
                <span>
                    <img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" />
                </span>
            </li>
        </ul>
        <div class="img_info">
            <div id="@item.Id" class="content hidden">
                @{
                    ViewBag.fileID = item.Id;
                }                
            </div>
            <div id="@item.Id" class="content hidden">
                @{
                    ViewBag.fileID = item.Id;
                }
            </div>
        </div>
    </div>
}
</div>
@Html.ActionLink("Preview", "PreView", new { id = ViewBag.fileID })
@Html.ActionLink("Details", "Details", new { id = ViewBag.fileID })
@Html.ActionLink("Delete", "Delete", new { id = ViewBag.fileID })  

因此，我尝试发送一个文件的 item.Id ，我点击该操作链接即可选择该文件。由于某种原因，无论我选择了哪个文件，都会发送最后一个文件ID。

JavaScrip代码：

$('.images_list ul li').click(function () {
$('.images_list .selected').removeClass('selected');
$(this).toggleClass('selected');
var clicked = $(this).attr('title');
$("#" + clicked).removeClass("hidden").siblings().addClass("hidden");
});

CSS代码：

.images_list ul li {
list-style: none;
float: left;
width: 150px;
height: 150px;
margin-right: 10px;
}

.images_list ul li span {
display:none;
position:absolute;
top:0px;
left:0px;
width:24px;
height:24px;    
}

.border {
border: 6px solid #D8D8D8;
background: url(upload/check.jpg);
}
.selected {
border: 6px solid green;
position:relative;
}
.hidden {
display:none;
}
.images_list li.selected span {
display:block;
}