Используя ссылку, чтобы показать больше текста с JavaScript

Question

Я пытался получить ссылку, чтобы раскрыть больше текста с помощью JavaScript. Я знаю, как сделать это с помощью кнопки, но подобный подход, похоже, не работает со ссылкой.

Вот моя разметка:

<form name="form">      
    <a href="Home.html" onClick="more(event)">Read More</a>
</form>

<p id="atext"><p>
<script src="Home.js"></script>

И мой код JavaScript:

function more() {
    e.preventDefault();
document.getElementById("atext").outerHTML = 'It touches many issues in our lives and packs a hell of a plot twist';
}

Я знаю, что вы можете сделать что-то похожее с jQuery, но единственное, что я нашел, это раскрыть текст, когда вы наводите курсор на него.

Answer 1

Я не понимаю, почему вы заключаете ссылку в форму. Вы можете удалить его из формы и просто сделать что-то вроде этого:

function more(e) {
    e.preventDefault();
    document.getElementById("atext").outerHTML = 'It touches many issues in our lives and packs a hell of a plot twist';
}

<a onClick="more(event)">Read More</a>
<p id="atext"></p>

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

Дайте мне знатьесли это помогло.

Answer 2

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

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

Также (для меня!) большая переменная on -lick без запрета, нет необходимости ... сделать ее объектно-ориентированной и нацеливать щелчок даже в JS.

Еще одна вещь;то, как вы динамически добавляете открываемый текст, вам не поможет. С точки зрения индексации SEO / SE, этот контент никогда не будет существовать, поскольку он не богат содержанием! То, что вам нужно сделать, это иметь содержимое на самом деле в вашем HTML и использовать JS, чтобы просто (простыми словами, скрыть его) и при действиях пользователя раскрыть остальное!

Помните «CONTENT IS KING»

Я быстро смоделировал пример (его можно сделать немного лучше, но он поможет вам двигаться в правильном направлении) для вас (с использованием jQuery, современной библиотеки JS). Если вы не знаете об этом, посоветуйте проверить это, на самом деле сделает вашу жизнь проще, чем оригинальный JS.

$(function() {

  var truncate_element = $('.read-more'),
    truncate_length = 100; // truncate length to 100 characters

  truncate_element.each(function() {
    var t = $(this).text();
    if (t.length < truncate_length) return;

    $(this).html(
      t.slice(0, truncate_length) + '<span>... </span><span class="more">More</span>' +
      '<span style="display:none;">' + t.slice(truncate_length, t.length) + ' <span class="less">Less</span></span>'
    );

  });

  $('.more', truncate_element).click(function(event) {
    event.preventDefault();
    $(this).hide().prev().hide();
    $(this).next().show();
  });

  $('.less', truncate_element).click(function(event) {
    event.preventDefault();
    $(this).parent().hide().prev().show().prev().show();
  });

});

.more,.less { cursor: pointer: text-decoration: underline; background: black; color: white; padding: 5px 10px; display: inline-block; }

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

<p class="read-more">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Решение Лукаса, с которым я почти согласен, не обязательно должно быть внутри элемента формы, если это не обязательно, но предложение об удалении href =«» от не очень хорошая идея, не только то, что недопустимая разметка, но в вашем случае не требуется. Используя якорь с href, я бы предложил использовать в качестве запасного варианта таргетинг на какой-либо элемент контента на странице, например href="#content", поэтому, если JS отключен или сломан, вы можете перейти к некоторому дополнительному контенту, но в вашем случае (в зависимости от вопроса) вывообще не нужно использовать элемент link.

Кстати, в приведенном выше примере вы можете просто добавить класс «read-more» к любому элементу, который вы хотите обрезать и функционировать с more именьше (как в примере) и столько раз, сколько вы хотите на одной странице.

Уроки дня: код с учетом OOJ, если вы хотите повторно использовать класс использования функции, избегайте написания контентачерез JS и иметь в своем HTML.