Metro ui css tile element-selected不起作用答案

【问题标题】：metro ui css tile element-selected doesn't workMetro ui css tile element-selected不起作用
【发布时间】：2015-09-27 11:37:28
【问题描述】：

Visual Studio 2013、ASP.NET Web 表单、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>

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

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

希望有人可以帮助我！

【问题讨论】：

标签： javascript html css tile metro-ui-css

【解决方案1】：

这就是我使 select 和 deselect 工作的方式：

$("[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

【讨论】：

使用 $(this).toggleClass("element-selected");

【解决方案2】：

在我的情况下，我不知道为什么，磁贴点击会再次点击。

我用：

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

它的工作原理。

【讨论】：