Развернуть / Свернуть текст в HTML - Javascript

ProgramBox

Развернуть / Свернуть текст в HTML — Javascript

Post author:admin
Запись опубликована:28 августа, 2022
Post category:Вопросы по программированию

#javascript #jquery #html #twitter-bootstrap

#javascript #jquery #HTML #twitter-bootstrap

Вопрос:

Я пытаюсь заставить работать javascript-код «Видеть больше» (развернуть) и «Видеть меньше» (свернуть). Я буду перебирать и вызывать этот код javascript для каждого экземпляра класса в HTML.

Это действительно работает при первом появлении на странице. Я ввел консоль.регистрирует, чтобы убедиться, что он работает правильно. т.Е. Каждый раз, когда я нажимаю «Подробнее», консоль будет печатать «Развернуть / свернуть» один раз.

Однако при каждом дополнительном экземпляре устройства (в другом фрагменте текста на странице) оно вообще не будет расширяться.

Что происходит, так это то, что во втором экземпляре консоль выводит — «Развернуть, свернуть». Таким образом, он фактически выполняет оба действия мгновенно (что означает, что он вообще не расширяется).

В третьем он печатает — «Развернуть, свернуть, развернуть, свернуть, развернуть, свернуть». Почти как экспоненциальный рост… Есть идеи?

 function showMoreLess(element) {
var showChar = 150;
var ellipsestext = "...";
var moretext = "See More";
var lesstext = "See Less";
var content = $(element).html();
if (content.length > showChar) {
    var show_content = content.substr(0, showChar);
    var hide_content = content.substr(showChar, content.length - showChar);
    var html = show_content 
                  '<span class="moreelipses">' 
                  ellipsestext
                  '</span><span class="remaining-content"><span>' 
                  hide_content   '</span>amp;nbsp;amp;nbsp;<a href="" class="morelink">' 
                  moretext 
                  '</a></span>';
    $(element).html(html);
}

$(".morelink").click(function () {
    if ($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html("See More");
        console.log("Collapse") // "Collapse" appears in console
    } else {
        $(this).addClass("less");
        $(this).html("See Less");
        console.log("Expand") // "Expand" appears in console
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();

    return false;
});

}

Это код jQuery, который проходит через каждый класс:

 $(function () {
    $.each($(".limitedTextSpace"), function(index, value) {
        showMoreLess(value);
    });
});

Редактировать:

Я следовал формату Роберто Линареса и воссоздал функцию следующим образом:

 function showMoreLess(element) {
var showChar = 150;
var ellipsestext = "...";
var moretext = "See More";
var lesstext = "See Less";
var content = $(element).html();
if (content.length > showChar) {
    var show_content = content.substr(0, showChar);
    var hide_content = content.substr(showChar, content.length - showChar);
    var html = '<span class="collapsed">'   show_content 
                  ellipsestext
                  '</span><span class="expanded">'
                  content
                  '</span><a href="javascript:void(0)" class="collapsed">'
                  moretext
                  '</a><a href="javascript:void(0)" class="expanded">' 
                  lesstext
                  '</a>'
    $(element).html(html);
}

}

Затем я внес небольшие изменения и в другую функцию цикла:

     $(function () {
    $.each($(".limitedTextSpace"), function(index, value) {
        showMoreLess(value);
    });

    $(".expanded").hide();
    $(".expanded, .collapsed").click(function() {
        $(this).parent().children(".expanded, .collapsed").toggle();
    });
});

Однако теперь возникает проблема, связанная с наличием разрывов в тексте. Код интерпретирует каждый абзац одного и того же текста как разные экземпляры expand / collapse, то есть вместо одного expand / collapse для блока текста для каждого абзаца существует несколько.

Ответ №1:

Он вообще не расширяется во второй и последующие разы, потому что вы уже потеряли все содержимое, когда заменили его свернутым содержимым. Это происходит потому, что вы никогда не «сохраняете» временно полное содержимое в другом месте, чтобы вы могли поместить его обратно при нажатии на ссылку развернуть.

Я бы рекомендовал вам изменить свою логику javascript, чтобы поместить в HTML как свернутое расширенное содержимое, так и переключить его видимость по ссылкам.

Пример:

HTML:

 <ul>
    <li>
        <span class="expanded">Expanded HTML content</span>
        <span class="collapsed">Collap...</span>
        <a href="javascript:void(0)" class="collapsed">Expand</a>
        <a href="javascript:void(0)" class="expanded">Collapse</a>
    </li>
     <li>
        <span class="expanded">Expanded HTML content</span>
        <span class="collapsed">Collap...</span>
       <a href="javascript:void(0)" class="collapsed">Expand</a>
        <a href="javascript:void(0)" class="expanded">Collapse</a>
    </li>
     <li>
        <span class="expanded">Expanded HTML content</span>
        <span class="collapsed">Collap...</span>
        <a href="javascript:void(0)" class="collapsed">Expand</a>
        <a href="javascript:void(0)" class="expanded">Collapse</a>
    </li>
     <li>
        <span class="expanded">Expanded HTML content</span>
        <span class="collapsed">Collap...</span>
        <a href="javascript:void(0)" class="collapsed">Expand</a>
        <a href="javascript:void(0)" class="expanded">Collapse</a>
    </li>
</ul>

Javascript:

 $(document).ready(function() {
    $(".collapsed").hide();

    $(".expanded, .collapsed").click(function() {
        $(this).parent().children(".expanded, .collapsed").toggle();
    });
});

Рабочий JSFiddle: http://jsfiddle.net/susxK /

1. Спасибо Роберто, который следовал тому же формату и исправил его для меня. Однако существует новая проблема, заключающаяся в том, что при наличии разрывов в блоке текста каждый абзац интерпретируется как отдельный фрагмент текста. Есть идеи?

2. Посмотрите на эту другую скрипку, которую я сделал с вашим точным javascript: http://jsfiddle.net/uQLTU/1 / Похоже, он работает со всеми видами блочных элементов в моем примере HTML. Может быть, если вы опубликуете часть своего HTML-кода, я смогу понять, почему он у вас не работает.

3. Неважно, это сработало! Не знаю, что, черт возьми, произошло. Спасибо, чувак!

4. Я внес пару изменений, так что вы можете развернуть / свернуть только при нажатии «seemore / seeless», а не весь элемент span. Но да, все работает хорошо. Еще раз спасибо.

Ответ №2:

С помощью Роберто Линареса я исправил код, чтобы он работал следующим образом:

 function showMoreLess(element) {
var showChar = 256;
var ellipsestext = "...";
var moretext = "See More";
var lesstext = "See Less";
var content = $(element).html();
if (content.length > showChar) {
    var show_content = content.substr(0, showChar);
    var hide_content = content.substr(showChar, content.length - showChar);
    var html = '<span class="collapsed">'   show_content 
                  ellipsestext
                  '</span><span class="expanded">'
                  content
                  '</span>amp;nbsp;amp;nbsp;<a href="javascript:void(0)" class="collapsed moretext">'
                  moretext
                  '</a><a href="javascript:void(0)" class="expanded lesstext">' 
                  lesstext
                  '</a>'
    $(element).html(html);
}

}

И в отдельной функции, когда документ будет готов:

 $(function () { // When page is loaded, run showMoreLess(value) on each instance of limitedTextSpace classes
$.each($(".limitedTextSpace"), function(index, value) {
    showMoreLess(value); 
});
$(".expanded").hide();
$(".moretext, .lesstext").click(function() {
    $(this).parent().children(".expanded, .collapsed").toggle();
});

});

Метки: Развернуть / Свернуть текст в HTML — Javascript