Este es el código jQuery que estoy usando en mi sitio web de WordPress y funciona bien.
jQuery(document).ready(function($){ $(document).on("click",".selected",function() { $('.wvg-single-gallery-image-container').css('display','none'); }) });Solo quiero que el código deje de funcionar en el ancho de pantalla de 766, en 766 el código no tiene que funcionar.
Déjame saber si hay algo que pueda hacer esto posible.
Gracias, Abdullah
Considera lo siguiente.
jQuery(document).ready(function($){ $(document).on("click", ".selected", function() { if($(window).width() < 766){ $('.wvg-single-gallery-image-container').hide(); } }); });Si el documento no es muy ancho, menos de 766, el botón realizará la acción. De lo contrario, no pasará nada.
Ver más: https://api.jquery.com/width/
Puede usar mediaMatch para probar contra una consulta de medios...
if (window.matchMedia('(max-width: 766px)')) { $('.wvg-single-gallery-image-container').css('display','none'); }… pero ese enfoque no es muy bueno. Considere lo que sucedería si el usuario cambiara el tamaño de la ventana después de que se haya ejecutado el JS. El estilo en línea que está agregando aún estaría allí, pero basado en el tamaño de ventana incorrecto.
En su lugar, use JS para agregar y eliminar clases de elementos. Luego use esas clases en su CSS con consultas de medios.
$('.wvg-single-gallery-image-container').addClass('a-suitably-semantic-class-name);