title: Select files using JavaScript and CSS for different operations
body: <p>I'm trying to get my file ID by selecting a file and pass it to an action link for preview,delete or details. Bellow is the code I have so far:</p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;div&gt;
  @foreach (var item in Model)
  {
      &lt;div class="images_list"&gt;
          &lt;ul&gt;
              &lt;li class="border" title="@item.Id"&gt;
                  &lt;img src="~/Images/@item.FileName" width="150" height="150" /&gt;
                  &lt;span&gt;
                      &lt;img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" /&gt;
                  &lt;/span&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class="img_info"&gt;
              &lt;div id="@item.Id" class="content hidden"&gt;
                  @{
                      ViewBag.fileID = item.Id;
                  }                
              &lt;/div&gt;
              &lt;div id="@item.Id" class="content hidden"&gt;
                  @{
                      ViewBag.fileID = item.Id;
                  }
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  }
  &lt;/div&gt;
  @Html.ActionLink("Preview", "PreView", new { id = ViewBag.fileID })
  @Html.ActionLink("Details", "Details", new { id = ViewBag.fileID })
  @Html.ActionLink("Delete", "Delete", new { id = ViewBag.fileID })  
  </code></pre>
  
  <p>So, I'm trying to send the <strong>item.Id</strong> of a file that I'm selecting it by clicking, to the action links. For some reason the last file Id is sent regardless the file I've selected.</p>
  
  <p>JavaScrip Code:</p>
  
  <pre><code>$('.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");
  });
  </code></pre>
  
  <p>CSS Code:</p>
  
  <pre><code>.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;
  }
  </code></pre>