Переключить псевдокласс: после на конкретном div

Question

Как включить или отключить псевдо-класс «после»?

Я пытаюсь придумать что-то вдоль линий:

$('.card').click(function(){ 

    if(pick1) { 
     pick2 = $(this).css('background-color'); 
     id2 = $(this).attr('id'); 
     >>> add display:none to .card:after for the clicked div <<< 

     if(pick1 == pick2 && id1!=id2) alert('Correct'); 
      else { 
       alert('Incorrect'); 
       >>> remove display:none from .card:after on clicked divs <<< 
      } 

     pick1 = false; 
     pick2 = false; 
    } else { 
     pick1 = $(this).css('background-color'); 
     id1 = $(this).attr('id'); 
     >>> add display:none to .card:after for the clicked div <<< 
    } 
}); 

Моего проекта здесь: http://jsfiddle.net/94jerdaw/29TCZ/3/

Answer 1

Почему бы вам не добавить дополнительный класс к правилу? Как это

.hidden.card:after{ 
    display:none 
} 

Тогда код может быть просто $().addClass("hidden") или $().removeClass("hidden")

if(pick1) { 
    pick2 = $(this).css('background-color'); 
    id2 = $(this).attr('id'); 
    $(this).addClass("hidden"); 

    if(pick1 == pick2 && id1!=id2) alert('Correct'); 
     else { 
      alert('Incorrect'); 
      $(this).removeClass("hidden"); 
     } 

    pick1 = false; 
    pick2 = false; 
} else { 
    pick1 = $(this).css('background-color'); 
    id1 = $(this).attr('id'); 
    $(this).addClass("hidden"); 
}