Читать дальше Функциональность - PullRequest
Новая
       1

Читать дальше Функциональность

0 голосов
/ 05 февраля 2020

Я пытаюсь найти решение для добавления дополнительных функций в группу полей на странице.

Простейшее решение, которое я видел, было таким: https://www.w3schools.com/howto/howto_js_read_more.asp, но проблема в том, что контент контролируется cms, поэтому ручное добавление в spans et c не вариант. Кроме того, JS в этом примере активируется только на первом фрагменте контента, поэтому не подходит для нескольких фрагментов контента.

Я искал создание js, которое ищет класс div и добавляет функциональность в определенном количестве символов / слов / в зависимости от высоты div, но я не могу найти подходящее решение, так что далеко. также в идеале кнопка «Читать далее» вообще не должна появляться, если текст ниже предела.

для справки - это упрощенная версия того, как выглядит мой html: 

<div class="col-sm-12">
    <div class="supp-item-body">
        <h3>title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed dolor odio. Suspendisse tempor vestibulum sodales. Maecenas faucibus at libero vitae iaculis. Nam rhoncus sit amet lacus elementum elementum. Sed ut odio tristique, scelerisque odio a, lacinia risus.</p>
    </div>
</div>
<div class="col-sm-12">
    <div class="supp-item-body">
        <h3>title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed dolor odio. Suspendisse tempor vestibulum sodales. Maecenas faucibus at libero vitae iaculis. Nam rhoncus sit amet lacus elementum elementum. Sed ut odio tristique, scelerisque odio a, lacinia risus.</p>
    </div>
</div>
<div class="col-sm-12">
    <div class="supp-item-body">
        <h3>title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed dolor odio. Suspendisse tempor vestibulum sodales. Maecenas faucibus at libero vitae iaculis. Nam rhoncus sit amet lacus elementum elementum. Sed ut odio tristique, scelerisque odio a, lacinia risus.</p>
    </div>
</div>
<div class="col-sm-12">
    <div class="supp-item-body">
        <h3>title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed dolor odio. Suspendisse tempor vestibulum sodales. Maecenas faucibus at libero vitae iaculis. Nam rhoncus sit amet lacus elementum elementum. Sed ut odio tristique, scelerisque odio a, lacinia risus.</p>
    </div>
</div>

это плюс еще несколько раз. Для ясности я удалил несущественные элементы.

Возможно, я просто смотрю в неправильном направлении, если я открыт для предложений.

Большое спасибо.

1 Ответ

0 голосов
/ 05 февраля 2020

Вот решение, которое отлично работает для того кода, который вы мне дали, при условии, что у каждого div есть один абзац с простым текстом внутри. Однако, если вы добавите HTML к абзацам (а не просто тексту) или если вы хотите, чтобы в каждом supp-item-body div было несколько абзацев, вам придется немного изменить код. Обратите внимание, что в этом решении используется jQuery, который вы добавили в качестве тега к своему вопросу, поэтому я предполагаю, что он уже есть в вашем проекте.

Просто скопируйте и вставьте его в пустое место. html файл и откройте его в Chrome, чтобы увидеть его в действии. 

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
<body>

    <div class="col-sm-12">
        <div class="supp-item-body">
            <h3>title</h3>
            <p>Atheism includes any philosophy which claims that no God or gods exist, including any rational or reasoning creator of the universe. However, if premises begin to exist without reason, then conclusions drawn from them are also without reason. If there is no god, all initial human premises about the external world begin to exist without reason. Therefore, if there is no god, all human conclusions about the external world are also without reason.</p>
        </div>
    </div>
    <div class="col-sm-12">
        <div class="supp-item-body">
            <h3>title</h3>
            <p>Polytheism refers to any philosophy which claims that there are multiple supreme creators of the universe. However, if anyone is not the author of every aspect of creation, then his authority is insufficient to rationally guarantee the behavior of creation. Under polytheism, no one is the author of every aspect of creation. Therefore, under polytheism, no one has the authority to rationally guarantee the behavior of creation.</p>
        </div>
    </div>
    <div class="col-sm-12">
        <div class="supp-item-body">
            <h3>title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed dolor odio. Suspendisse tempor vestibulum sodales. Maecenas faucibus at libero vitae iaculis. Nam rhoncus sit amet lacus elementum elementum. Sed ut odio tristique, scelerisque odio a, lacinia risus.</p>
        </div>
    </div>
    <div class="col-sm-12">
        <div class="supp-item-body">
            <h3>title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed dolor odio. Suspendisse tempor vestibulum sodales. Maecenas faucibus at libero vitae iaculis. Nam rhoncus sit amet lacus elementum elementum. Sed ut odio tristique, scelerisque odio a, lacinia risus.</p>
        </div>
    </div>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $('.supp-item-body p').each(function(i, el)
        {
            var p = $(el);
            var pTxt = p.text();
            if (pTxt.length > 120)
            {
                var pTxtA = pTxt.substring(0, 120);
                pTxtA = pTxtA.substring(0, pTxtA.lastIndexOf(' '));
                pTxtB = pTxt.substring(pTxtA.length + 1);

                var pHtml = pTxtA + '<span class="dots">...</span> <span class="more-text" style="display: none;">' + pTxtB + '</span>';
                p.html(pHtml);
            }
            var btn = $('<button>Read more</button>')
            btn.unbind('click.more').bind('click.more', function(e)
            {
                e.preventDefault();
                p.find('.more-text').toggle();
                p.find('.dots').toggle();
            });
            p.after(btn);
        });
    </script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...