javascript - 地铁 ui css tile 元素选择不起作用

Question

Visual Studio 2013、ASP.NET 网络表单、metro UI CSS 3.0

我正在尝试创建一个选择元素的磁贴，它看起来像本网站中的那个 http://metroui.org.ua/tiles.html

<div class="tile bg-green fg-white element-selected" data-role="tile">
   <div class="tile-content iconic">
      <span class="icon mif-home"></span>
      <div class="tile-label"></div>
   </div>
</div>

我的代码创建了一个像上面这样的图 block ，勾选了勾选图标，但是当我按下图 block 时，勾选图标并没有取消勾选!

我在这里想要的是创建一个 tile，当用户点击它时会显示一个勾号图标，当用户再次点击它时会取消选中。

希望有人能帮助我!

Answer 1

这就是我如何让选择和取消选择工作:

$("[data-role='tile']").click(function(){
    if($(this).hasClass("element-selected")){
        $(this).removeClass("element-selected");
    }else{
        $(this).addClass("element-selected");
    }
});

Here is the link to the JSFiddle demo