Чтение содержимого на лету и добавление класса

Question

Чтение содержимого на лету и добавление класса

VortexWeb.net Мыслитель (5825), открыт 1 неделю назад

Ребята подскажите есть небольшой скриптик который добавляет класс прочитав содержимое дива, но если в самих табах например текст, то при переключении вкладки на табах класс не добавляется остается прежним. Есть ли метод чтобы читался текст на лету? Без перезагрузки страницы и класс менялся в зависимости от текста

$(function(){
$('#some-id:contains("Text")').addClass('some-class');
});
</script>

Answer 1

Проблема в том, что ваш код выполняется только один раз при загрузке страницы и не реагирует на изменения содержимого или переключение вкладок. Для динамического отслеживания изменений текста и добавления класса "на лету" можно использовать несколько подходов.

1. MutationObserver (современный способ)
Этот метод позволяет отслеживать изменения в DOM:

 $(function() {  
    function checkTextAndAddClass() {  
        $('#some-id').each(function() {  
            if ($(this).text().includes("Text")) {  
                $(this).addClass('some-class');  
            } else {  
                $(this).removeClass('some-class');  
            }  
        });  
    }  

    // Наблюдатель за изменениями в DOM  
    const observer = new MutationObserver(checkTextAndAddClass);  
    observer.observe(document.body, {  
        childList: true,  
        subtree: true,  
        characterData: true  
    });  
 
    // Проверка при загрузке  
    checkTextAndAddClass();  
});

2. Периодическая проверка (если MutationObserver не подходит)

 $(function() {  
    function checkText() {  
        $('#some-id').each(function() {  
            if ($(this).text().includes("Text")) {  
                $(this).addClass('some-class');  
            } else {  
                $(this).removeClass('some-class');  
            }  
        });  
    }  
 
    // Проверка каждые 500мс  
    setInterval(checkText, 500);  
    checkText(); // Первоначальная проверка  
});

3. Для вкладок (если это система табов)
Если у вас переключение вкладок реализовано через jQuery, можно добавить обработчик события переключения:

 $(function() {  
    function updateClasses() {  
        $('.tab-content').each(function() {  
            if ($(this).text().includes("Text")) {  
                $(this).addClass('some-class');  
            } else {  
                $(this).removeClass('some-class');  
            }  
        });  
    }  
 
    // При переключении вкладок  
    $('.tab-button').on('click', function() {  
        setTimeout(updateClasses, 50); // Небольшая задержка для применения изменений  
    });  
 
    // Первоначальная проверка  
    updateClasses();  
});

4. Для динамического контента (AJAX и т.д.)
Если контент загружается через AJAX:

 $(document).ajaxComplete(function() {  
    $('#some-id').each(function() {  
        if ($(this).text().includes("Text")) {  
            $(this).addClass('some-class');  
        } else {  
            $(this).removeClass('some-class');  
        }  
    });  
});