单击或点击切换HTML文本

Toggling HTML text with a click or tap

本文关键字：HTML 文本 单击      更新时间：2023-09-26

我正在设计一个网站，该网站将显示长文本块，其中经常包含难以阅读的文本其他部分的内部交叉引用。例如，原文中的一段话可能会说：

"…如本条关于现代艺术的第一千十四章第（2）小节第（a）分段所述。"

我想以更简洁的格式向读者介绍这篇文章，例如：

"…如关于现代艺术的第1014（2）（a）章所述。"

但我必须让用户在我的缩写版本和原始版本之间切换。我想通过让用户点击或点击特定的文本来实现这一点，该文本将在缩写（默认情况下）演示和完整的原始版本之间切换。理想情况下，一段简短的文本将被突出显示或勾勒出来，以向用户发出信号，表明为了可读性，较长的原始段落被压缩了，但可以点击/轻击以展开。

有人能建议我如何编写这样的程序吗？它应该/可以用HTML、CSS、jQuery、JavaScript或其他方式完成吗？

（需要明确的是，我不需要自动将原始文本转换为短格式的算法；我可以在每种情况下手动识别和键入短格式。）

谢谢！

如果您正在处理相对较短的文本片段，如sentance，我建议将较长的版本存储在span标记<span>的data-属性中。然后使用jQuery将span标记中的文本与存储在data-属性中的文本进行交换。

HTML

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim 
    nisl, elementum sit amet tortor eu, finibus tristique libero. Quisque 
    eget varius magna. Suspendisse sodales vitae ligula eget pellentesque. 
    <span data-long-text="Aenean pharetra ut massa non volutpat">Aenean 
    123</span>. Vivamus eu viverra eros. Aliquam condimentum lacus odio, 
    sit amet vulputate sem lacinia id. Suspendisse ultrices, lectus ut 
    volutpat cursus, justo risus aliquet lectus, hendrerit interdum massa 
    arcu at ipsum.
</p>

CSS

span[data-long-text] {
    border-bottom: 1px dotted red;
    cursor: pointer;
}
// optional styling changed to long text
.long-text[data-long-text] {
    border-bottom-color: green;
}

jQuery

$('[data-long-text]').on('click', function(e) {
    var $this = $(this);
    var short = $this.text(); // text in span tag
    var long  = $this.attr('data-long-text'); // text in data- attribute
    // text values swapping places
    $this.text(long);
    $this.attr('data-long-text', short);
    // optional styling change
    $this.toggleClass('long-text');
});

jsFiddle：http://jsfiddle.net/hp383q1t/

https://jsfiddle.net/1gLv5qyv/

使用

$(".text-toggle").click(function(){
    $(".toggleAble").toggle();
});

使用JQuery插件。

您可以制作一个具有属性显示的css类：none用于文本，并为其提供id，并使用jquery方法切换类

您可以像这样使用html、css和jquery（javascript）：

…如第一千章第（2）小节第（a）分段所述以及这篇关于现代艺术的文章中的十四篇。

a.ref {
    background: yellow;
    color: black;
    text-decoration: none;
}

$('.ref').click(function (e) {
    var refData = $(this).attr('data-att');
    var refText = $(this).text();
    e.preventDefault();
    $(this).text(refData);
    $(this).attr('data-att', refText);
});


$('.ref').click(function (e) {
    var refData = $(this).attr('data-att');
    var refText = $(this).text();
    e.preventDefault();
    $(this).text(refData);
    $(this).attr('data-att', refText);
});
a.ref {
    background: yellow;
    color: black;
    text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>...as discussed in <a href="#" class="ref" data-att="Ch. 1014(2)(a)">subparagraph (a) of subdivision (2) of chapter one thousand and fourteen</a> of this article concerning modern art.</p>

如果SEO不是一个考虑因素，我想我会这样做，并将长短描述存储在数据属性中。运行此程序后，您只需要专注于正确定义HTML结构。

http://jsfiddle.net/skooliano/nyuroero/3/

HTML

<p class="has-expanded-text">
     ...as discussed in <span class="toggle short" data-short-
     description="Ch. 1014(2)(a)" data-long-description="subparagraph 
     (a) of subdivision (2) of chapter one thousand and fourteen of this 
     article"></span> concerning modern art.
</p>

CSS

.toggle { color: blue; text-decoration: underline; cursor: pointer; }

jQuery

$('p.has-expanded-text').each(function(index){
    var $span = $(this).find('.toggle'),
        $short = $span.data('short-description'),
        $long = $span.data('long-description');
    $span.text($short); // sets default text to short description
    $span.click(function(){
        if($span.hasClass('short')){
            $(this).addClass('long').removeClass('short');
            $(this).text($long);
        }
        else{
            $(this).addClass('short').removeClass('long');
            $(this).text($short);
        }
    });
});

这在jQuery、CSS和香草JS 中是完全可能的

HTML:

<p class="original">you original text</p>
<p class="secondary">secondary text</p>

CSS：

.secondary { display:none; }

jQuery:

jQuery('.original').click(function(){
    jQuery(this).hide();
    jQuery('.secondary').show();
});
相关文章：