Как сделать несколько кнопок чтения на одной странице с помощью одного jquery?

Я хочу сделать несколько кнопок читать больше и меньше читать на той же странице, используя только один jquery. когда я нажал кнопку «Читать дальше», отображается некоторый контент, а в конце абзаца отображается кнопка «Читать меньше». Я выполнил свой 1-й шаг. на одной странице есть три кнопки «читать дальше». Один работает хорошо, но два других не работают. Пожалуйста, дайте несколько предложений.

$(document).ready(function() {
  $("#toggle").click(function() {
    var elem = $("#toggle").text();
    if (elem == "Read More") {
     
      $("#toggle").text("Read Less");
      $("#text").slideDown();
    } else {

      $("#toggle").text("Read More");
      $("#text").slideUp();
    }
  });
});

#text{
  display:none;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel = "stylesheet"/>
<div class = "uk-section uk-section-small uk-section-default">
    <div class = "uk-container">
        <h2 class = "heading-primary uk-text-center "><span>Guide</span></h2> 
            <div class = "uk-grid-divider uk-child-width-expand  uk-margin-medium-top uk-margin-mediumm-bottom" uk-grid>
                <div>
                    <div class = "uk-text-left" uk-grid>
                        <div class = "uk-width-1-4@s uk-text-center">
                             <img class = "uk-border-square" src = "https://source.unsplash.com/200x200?face" alt = "Border square">
                        </div>
                        <div class = "uk-width-3-4@s">
                            <h1 style = "display: inline">Name</h1><h2 style = "display: inline;  font-style: italic;">(Designation)</h2>
                            <p class = "uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>        
                            <p class = "uk-text-justify" id = "text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.</p><a id = "toggle">Read More</a>
                        </div>
                    </div>
                      <div class = "uk-text-left" uk-grid>
                        <div class = "uk-width-3-4@s">
                              <h1 style = "display: inline">Name</h1><h2 style = "display: inline;  font-style: italic;">(Designation)</h2>
                              <p class = "uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>        
                              <p class = "uk-text-justify" id = "text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.</p><a id = "toggle">Read More</a>
                          </div>
                        <div class = "uk-width-1-4@s">
                            <img class = "uk-border-square" src = "https://source.unsplash.com/200x200?face" alt = "Border square">
                        </div>
                    </div>

                    <div class = "uk-text-left" uk-grid>
                        <div class = "uk-width-1-4@s uk-text-center">
                             <img class = "uk-border-square" src = "https://source.unsplash.com/200x200?face" alt = "Border square">
                        </div>
                        <div class = "uk-width-3-4@s">
                            <h1 style = "display: inline">Name</h1><h2 style = "display: inline;  font-style: italic;">(Designation)</h2>
                            <p class = "uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>        
                            <p class = "uk-text-justify" id = "text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.</p><a id = "toggle">Read More</a>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>

У вас не должно быть нескольких элементов с одним и тем же id

— 28.12.2018 08:58

Хорошо, я понял. Спасибо за ваш ответ и ваше время.

— 30.12.2018 09:23

javascript jquery html css uikit

28.12.2018 08:50

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

3 811

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

$(document).ready(function() {
  $("#toggle").click(function() {
    var elem = $(this).text();
    if (elem == "Read More") {

      $(this).text("Read Less");
      $("#text").slideDown();
    } else {

      $(this).text("Read More");
      $("#text").slideUp();
    }
  });

});

все ваши ответы - пожалуйста, попробуйте? вы, вероятно, можете добавить больше описания

— 28.12.2018 09:38

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

— 28.12.2018 17:32

28.12.2018 08:57

Ответ принят как подходящий

Проблема

Вы добавляете несколько элементов с одним и тем же id, это не подходит и означает, что когда вы пишете свой javascript, возникают ошибки. При использовании id код не может отличить разные элементы, которые связаны между собой, т. Е. Расширяет неправильный текст. Вы также не сообщаете коду о взаимосвязи между выбранным элементом и элементом, который будет показан / скрыт.

Решение

Используйте классы для каждого из ваших элементов - например, toggle-text-button для ссылок, которые запускают отображение или скрытие элементов с классом .toggle-text.

Я использовал следующий код для перехода от <a class = "toggle-text-button">Read More</a> к соответствующим элементам:

$(this).parent().children(".toggle-text").slideDown();

Объяснение кода:

Обозначение jquery $(this), сообщающее, что код должен начинаться с элемента, который в данный момент находится в фокусе (т. Е. Того, который был нажат)
.parent() перемещает вверх по дереву DOM на один элемент (альтернативой может быть .closest(), который продолжает двигаться вверх до тех пор, пока не будет выполнено условие селектора)
.children(".toggle-text") находит всех дочерних элементов текущего элемента (поскольку мы переместились вверх по дереву DOM, это родительский элемент для выбранного элемента), которые соответствуют селектору
.slideDown() сдвиньте вниз любые элементы, которые соответствуют предыдущей серии селекторов

Демо

// Add click event dynamically
$(document).on("click", ".toggle-text-button", function() {

  // Check if text is more or less
  if ($(this).text() == "Read More") {

    // Change link text
    $(this).text("Read Less");
    
    // Travel up DOM tree to parent, then find any children with CLASS .toggle-text and slide down
    $(this).parent().children(".toggle-text").slideDown();
    
  } else {


    // Change link text
    $(this).text("Read More");
    
    // Travel up DOM tree to parent, then find any children with CLASS .toggle-text and slide up 
    $(this).parent().children(".toggle-text").slideUp();
    
  }
  
});

.toggle-text {
  display: none;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel = "stylesheet" />
<div class = "uk-section uk-section-small uk-section-default">
  <div class = "uk-container">
    <h2 class = "heading-primary uk-text-center "><span>Guide</span></h2>
    <div class = "uk-grid-divider uk-child-width-expand  uk-margin-medium-top uk-margin-mediumm-bottom" uk-grid>
      <div>
        <div class = "uk-text-left" uk-grid>
          <div class = "uk-width-1-4@s uk-text-center">
            <img class = "uk-border-square" src = "https://source.unsplash.com/200x200?face" alt = "Border square">
          </div>
          <div class = "uk-width-3-4@s">
            <h1 style = "display: inline">Name</h1>
            <h2 style = "display: inline;  font-style: italic;">(Designation)</h2>
            <p class = "uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>
            <p class = "uk-text-justify toggle-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum
              voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.</p><a class = "toggle-text-button">Read More</a>
          </div>
        </div>
        
        <div class = "uk-width-1-4@s uk-text-center">
            <img class = "uk-border-square" src = "https://source.unsplash.com/200x200?face" alt = "Border square">
          </div>
          <div class = "uk-width-3-4@s">
            <h1 style = "display: inline">Name</h1>
            <h2 style = "display: inline;  font-style: italic;">(Designation)</h2>
            <p class = "uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>
            <p class = "uk-text-justify toggle-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum
              voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.</p><a class = "toggle-text-button">Read More</a>
          </div>
        </div>
        
        
        <div class = "uk-width-1-4@s uk-text-center">
            <img class = "uk-border-square" src = "https://source.unsplash.com/200x200?face" alt = "Border square">
          </div>
          <div class = "uk-width-3-4@s">
            <h1 style = "display: inline">Name</h1>
            <h2 style = "display: inline;  font-style: italic;">(Designation)</h2>
            <p class = "uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>
            <p class = "uk-text-justify toggle-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum
              voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.</p><a class = "toggle-text-button">Read More</a>
          </div>
        </div>
        
      </div>
    </div>
  </div>
</div>

Альтернативная демонстрация

Вы можете упростить свой javascript, если свяжете элементы с атрибутами. См. Базовую демонстрацию ниже:

$(document).on("click", ".toggle-text-button", function() {


  if ($(this).text() == "Read More") {

    $(this).text("Read Less");
    
    // Use a jquery selector using the `.attr()` of the link
    $("#toggle-text-" + $(this).attr("toggle-text")).slideDown();

  } else {

    $(this).text("Read More");
    
    // Use a jquery selector using the `.attr()` of the link
    $("#toggle-text-" + $(this).attr("toggle-text")).slideUp();
  
  }

});

.toggle-text {
  display: none;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Text that cannot be hidden.</p>
<p class = "toggle-text" id = "toggle-text-1">Text to show and hide.</p>
<a class = "toggle-text-button" toggle-text = "1">Read More</a>

Спасибо, это действительно помогло, и ваше объяснение приятное. @Oliver Trampleasure

— 30.12.2018 09:30

28.12.2018 09:09

Надеюсь, я не опоздала для этого. Есть простое решение без jQuery. Просто используйте переключатель из UIKIT.

<section class = "uk-margin-small-top">
    <p>Lorem ipsum...</p>
    <p id = "toggle-click" class = "uk-padding" hidden>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, tempora! Odio quibusdam odit vitae magni dolore. Praesentium officiis vel eos dicta expedita a delectus amet laborum voluptate? Veritatis, pariatur sed.</p>
    <a class = "uk-link" type = "button" uk-toggle = "target: #toggle-click; animation: uk-animation-fade; mode: click" aria-expanded = "false">
      <span id = "toggle-click">Read More ...</span>
      <span id = "toggle-click" hidden>Read Less ...</span>
    </a>
  </section>

14.10.2021 05:12