Vasiliyyyy
@Vasiliyyyy

Как применить действие на каждый элемент с классом на всей странице если высота блока больше ХХpx?

Здравствуйте, я не спец в JS, но задачку надо решить быстро, я туплю что-то.
В общем и целом, есть код:
https://codepen.io/smgnome/pen/BawBZJe

- Если блок с классом text-r-tren-opis высотой больше 20px, то применить функционал moreContent else - ничего не делать (не надо кнопку и затемнение)
- надо применить это ко всем div с классом text-r-tren-opis

В примере используется это:
https://github.com/WahaWaher/morecontent-js
Возможно есть какое-то другое решение - тоже можно рассмотреть.
  • Вопрос задан
  • 24 просмотра
Решения вопроса 1
Vasiliyyyy
@Vasiliyyyy Автор вопроса
Решение было найдено на другом ресурсе, спасибо человеку amr-now

Публикую решение здесь, может кому пригодится:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- jquery.morecontent.js -->
    <script src="https://cdn.jsdelivr.net/npm/morecontent-js@1.0.1/dist/jquery.morecontent.min.js"></script>
    <style>
        .mrc-shadow {
            pointer-events: none;
            position: absolute;
            height: 30px;
            /* Высота блока с тенью */
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 999;
            /* Цвета градиента в зависимости от фона сайта */
            background: linear-gradient(to top, #fff 14%, rgba(0, 0, 0, 0) 100%);
        }
    </style>
</head>
<body>
    <div style="max-width:350px">
        <div class="text-r-tren-opis">
            <p>у поворота.ног и одновременно разворачивать носки коньков в сторону пову поворота.ног и одновременно
                разворачивать носки коньков в сторону повием ног и одновременно разворачивать носки коньков в сторону
                поворота.ног и одновременно разворачивать носки коньков в сторону ь носки коньков в сторону поворота.ног
                и
                одновременно разворачивать носки коньков в сторону поворота поворота.ног и одновременно разворачивать
                носки
                коньков в сторону пову поворота.ног и одновременно разворачивать носки коньков в сторону повием ног и
                одновременно разворачивать носки коньков в сторону поворота.ног и одновременно разворачивать носки
                коньков в
                сторону поворота.</p>
        </div>
        <div class="text-r-tren-opis" style="height: 40px; overflow: hidden;">
            <p>у поворота.ног и одновременно разворачивать носки коньков в сторону пову поворота.ног и одновременно
                разворачивать носки коньков в сторону пову поворота.ног и одновременно разворачивать носки коньков в
                сторону
                пову поворота.ног и одновременно разворачивать носки коньков в сторону пову поворота.ног и одновременно
                разворачивать носки коньков в сторону повием ног и одновременно разворачивать носки коньков в сторону
                поворота.ног и одновременно разворачивать носки коньков в сторону поворота.</p>
        </div>
        <div class="text-r-tren-opis">
            <p>у поворота.ног и одновременно разворачивать носки коньков в сторону пову поворота.ног и одновременно
                разворачивать носки коньков в сторону пову поворота.ног и одновременно разворачивать носки коньков в
                сторону
                пову поворота.ног и одновременно разворачивать носки коньков в сторону пову поворота.ног и одновременно
                разворачивать носки коньков в сторону повием ног и одновременно разворачивать носки коньков в сторону
                поворота.ног и одновременно разворачивать носки коньков в сторону поворота.</p>
        </div>
    </div>
    <script>
        $('.text-r-tren-opis').filter((i, e) => e.getBoundingClientRect().height > 40) // Если полная высота элемента больше 40 пикселей
            .moreContent({
                "height": 50,
                "useCss": false,
                "shadow": true
            });
    </script>
</body>
</html>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@inFureal
Событие resize и свойство offsetHeight должны помочь
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы