Contexto : Tengo una galería de imágenes. El usuario puede seleccionar cada imagen, cuando hace clic en ella, el atributo "seleccionado" se agrega al elemento individual y se agrega una nueva clase a la imagen elegida. La cuestión es que quiero limitar esto a solo 2 selecciones disponibles.
Quiero editar mi secuencia de comandos para que solo se ejecute hasta que la longitud sea 2 o menos. Si la longitud llega a 2, no se agregarán más atributos seleccionados ni se alternarán más cambios de clase.
Siento que estoy cerca. En este momento, mis usuarios pueden seleccionar/deseleccionar, pero pueden hacerlo demasiadas veces. ¿Dónde me estoy equivocando?
function NFTSelector() { $("#NFTGallery2 > img").each(function() { $(this).on("click", function() { if($(this).filter("[selected]").length>=2) { alert('true'); } else console.log("less than 2 or undefined so letting them choose more"); { $(this).toggleClass('chosenNFT'); if ($(this).attr('selected')) { $(this).removeAttr('selected'); } else { $(this).attr('selected', 'selected'); } } }) }); }Cambié mi enfoque, en su lugar lo configuré como casillas de verificación y limité las casillas de verificación de esta manera
function NFTSelector() { var limit = 3; $('#NFTGallery2 > li > input').on('change', function(evt) { if($('#NFTGallery2 > li > input:checked').length >= limit) { this.checked = false; } }); }