There is a code for replacing the class when changing the screen resolution, but the replacement itself does not occur, please help to figure out what is wrong.

$(window).ready(function() { $(window).resize(function() { var wi = $(window).width(); if (wi >= 1300){ $('.comment-text-block').replaceWith($('.comment-text-blocks')); } }); });

    2 answers 2

    If you only need to change the class, then:

     $(window).ready(function() { $(window).resize(function() { var wi = $(window).width(); if (wi >= 1300){ var $block = $('.comment-text-block'); $block.addClass('comment-text-blocks').removeClass('comment-text-block'); } }); });

    If the content is, then make sure that $ ('. Comment-text-blocks') exists and has content ...

       $(window).resize(function() { var wi = $(window).width(); if (wi < 600 && $('.comment-text-block').length > 0){ $('.comment-text-block').replaceWith($('.comment-text-blocks')); } });

      Example: http://jsfiddle.net/xbzyd/

      I understand that when you resize a window, the script runs repeatedly, because of this, blocks are repeatedly replaced. And since there is no block .comment-text-block , but block .comment-text-blocks already cut out, then all blocks are deleted.