javascript - Metro ui css tile element-selected不起作用

Question

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

我正在尝试创建一个看起来像本网站http://metroui.org.ua/tiles.html中的 tile element-selected

<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>

我的代码创建了一个像上面这样的磁贴，选中了勾号图标，但是当我按下磁贴时，勾号图标并没有像它应该的那样取消选中！

我在这里想要创建一个磁贴，当用户单击它时将显示一个勾号图标，并在用户再次单击它时取消选中。

希望有人能帮助我！

Answer 1

这就是我使选择和取消选择工作的方式：

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

这是 JSFiddle 演示的链接

Answer 2

就我而言，我不知道为什么，磁贴单击会再次单击。

我用：

$('.class').mousedown(function(event) {$(this).toggleClass("selected")})

它的作品。