Hola.
Yo usaria la funcion toggleClass() para añadir o quitar una clase.
en la hoja de estilos añade esta regla :
.verde { border: 6px solid green; }
y en el js añade esa clase con toggleClass
y en cuanto a lo de redirigir cuando haya 3 seleccionadas yo usaria una funcion que cuente cuantas clases "verde"
seria algo asi:
Código Javascript
:
Ver original$(document).ready(function(){
$('.show-chocolate').on('click',function(){
$('.bacon').toggle('slow');
$('.item-chocolate img').toggleClass("verde");
cuenta();
});
$('.show-cereza').on('click',function(){
$('.cereza').toggle('slow');
$('.item-cereza img').toggleClass("verde");
cuenta();
});
$('.show-caramelos').on('click',function(){
$('.caramelosi').toggle('slow');
$('.item-caramelos img').toggleClass("verde");
cuenta();
});
$('.show-merengue').on('click',function(){
$('.merengue').toggle('slow');
$('.item-merengue img').toggleClass("verde");
cuenta();
});
$('.show-figura').on('click',function(){
$('.figura').toggle('slow');
$('.item-figura img').toggleClass("verde");
cuenta();
});
$('.show-lazos').on('click',function(){
$('.lazos').toggle('slow');
$('.item-lazos img').toggleClass("verde");
cuenta();
});
});
function cuenta(){
var seleccionadas = $('.verde').length;
if (seleccionadas > 2){
window.location = 'http://www.google.com';
}}
no lo he probado, espero te funcione
saludos