使用链接显示更多带有 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 多年，而且还很脏。抱歉吐槽了！

我的建议是创建一个可以重用的函数，而不是只关注一个 ID，就好像需要在同一页面上再次使用一样，您不能多次使用相同的 ID，因此您将复制该函数。

另外（对我来说！）使用 onclick 变量是一个很大的禁忌，不需要......即使在 JS 中也让它面向对象并定位点击。

还有一件事; 您如何动态添加显示的文本不会对您有任何帮助。在 SEO / SE 索引的眼中，该内容永远不会存在，因为它不是内容丰富的！您需要做的是将内容实际包含在您的 HTML 中，并使用 JS 来简单地（简单来说，隐藏它）并根据用户操作显示其余内容！

记住“内容为王”

我很快为你模拟了一个例子（可以做得更好，但会帮助你朝着正确的方向前进）（使用 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被禁用或损坏可能向下导航到一些更多的内容，但在你的情况下（基于问题），你不完全需要使用链接元素。

顺便说一句，在上面的示例中，您可以将类“read-more”添加到您希望它截断的任何元素中，并在单个页面上使用更多和更少（如示例）和任意次数。

今日课程：考虑到 OOJ 编写代码，如果想重用函数使用类，请避免通过 JS 编写内容并在 HTML 中包含。