0

Есть несколько одинаковых текстовых блоков, каждому из них задан один и тот же класс. Нужно сделать так, чтобы при нажатии ссылки "Читать далее" текст раскрывался полностью. Как сделать это с помощью id, понятно, но не писать же для каждого блока скрипт, если эти блоки идентичны и различаются только контентом. Реализация с помощью id: http://jsfiddle.net/wne7y9u0/

window.onload = function(){
    blok = document.getElementById('content_text');
    parent = blok.parentNode;
    blok_height = blok.style.height ? blok.style.height : blok.offsetHeight;

    if(blok_height > 60){
        blok.style.maxHeight = '80px';
        link = parent.getElementsByClassName('read-next')[0];
        link.style.display = 'inline'; 

        link.onclick = function(){

            if(blok.style.maxHeight){
               blok.style.maxHeight = '';
               shadow.style.display ='none';
               link.innerHTML = 'Скрыть';
            } else {
               blok.style.maxHeight = '80px';
               link.innerHTML = 'Читать далее...'; 
               shadow.style.display ='block';
            }
            return false;
        } 
    }
}

2 ответа 2

2

Очевидно вы можете использовать querySelectorAll по имени класса блока:

[].forEach.call(
    document.querySelectorAll('.block'),
    function (el) {
        ...
    }
); 

А вообще, возможно Javascript вам тут не нужен. Есть приемлемое решение на чистом CSS.

3
  • Эм.. Это ответ не на этот вопрос...
    – Qwertiy
    25 окт 2016 в 17:22
  • использовать querySelectorAll чтобы найти все блоки, далее: el.querySelector('.read-next'), обработчик onclick (ev) => el.classList.toggle('opened'), внешний вид и анимация в стилях. 25 окт 2016 в 18:02
  • Решение на чистом css очень помогло, спасибо!
    – LSP
    2 дек 2016 в 17:40
0
  1. На контейнере подписаться на всплытие клика.
  2. В обработчике прочитать event.target - это будет кликнутый элемент.
  3. Найти среди его родителей (или его самого) элемент с требуемым классом (если такого нет, то ничего не делать).
  4. Дальше, думаю, ясно (вроде в вопросе есть нужный код).

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.