metro ui css tile element-selected не работает

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>

введите описание изображения здесь

мой код создает плитку, подобную этой выше, с отмеченным значком галочки, но когда я нажимаю на плитку, значок галочки не снимается, как должно быть!

Здесь я хочу создать плитку, которая будет отображать значок галочки, когда пользователь щелкнет ее, и снимет флажок, когда пользователь щелкнет ее снова.

Надеюсь, кто-нибудь сможет мне помочь!


javascript html css tile metro-ui-css
person Fish    schedule 09.07.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вот как я заставил работать select и deselect:

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

Вот ссылка на демонстрацию JSFiddle

person Ahs N    schedule 09.07.2015
comment
используйте $ (this) .toggleClass (выбранный элемент); - person Kasper Roma; 17.09.2015

arrow_upward
0
arrow_downward

В моем случае, я не знаю почему, клик плитки делает второй щелчок.

Я использую:

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

И это работает.

person Nicolas Candela    schedule 26.02.2021