Javascript 将一个文本放置在另一个文本上以响应按钮

所以我正试图弄明白这一点，我完全迷路了。这就是我希望我的程序要做的

TEXT1

button

当我按下按钮时，我希望发生以下情况：

TEXT2

button

当我再次按下按钮时，我想：

TEXT3

button

对于最后一段文字，我希望按钮消失：

TEXT4

因此，如果用户已经点击按钮阅读下一个文本，我不会给用户返回并阅读之前文本的选项

现在，这是我最接近产生这种效果的地方。我会给我所有的

文本
分配一个类。让我们称之为
文本
。我会给我的巴顿上课。我们称之为
readMore
。我将调用
单击（函数（{}））
，以
读取更多信息。因此，当我单击按钮时，我会调用
fadeOut（）
到
（this）
，这是当前文本
TEXT1
。然后调用
fadeIn（）
到
（下一步）
，即
TEXT2
。但问题是
（this）
总是指
TEXT1
，
（next）
总是指
TEXT2
。这就是我的问题。有什么可能的解决办法吗

这是我提出的代码：

$(document).ready(function(){
    $('.readMore').click(function(){
        $('.texts').(this).fadeOut("fast");
        $(this).next().fadeIn("fast");
    });
});

可以对文本块使用绝对位置，但需要固定高度的容器。您还可以制作一个文本容器用于显示，并使用
display:none隐藏块中的所有文本并将html从它替换为可见容器
您的逻辑似乎正确。您在按钮上有一个单击事件，每次单击它都会更改文本。您可以通过更改
$（'.text'）
元素的
innerHTML
来更改文本。
此外，为了获得不同的文本编号1、2、3等，您可以添加一个全局变量
var globalCounter=0
并将
全局计数器
增加1

因此，下面的代码应该可以工作：

$(document).ready(function(){
    var globalCounter = 0;
    $('.readMore').click(function(){
        globalCounter++;
        $('.texts')[0].innerHTML = "Text "+ globalCounter; 
    });
});

另外，如果希望在显示文本4时按钮消失，可以添加一个简单的if语句，用于检查globalCounter变量。当它为4时，您可以将按钮的
显示属性设置为
无
以下是代码：

var MAX_CLICK_COUNT = 4;
var currentCount = 1;
function updateLabel(){
    $("h3").html("TEXT "+ ++currentCount);
    if(currentCount == MAX_CLICK_COUNT) $("button").hide();
}

以及


更新：

var MAX_CLICK_COUNT = 4;
var currentCount = 0;
var content = ["Paragraph text 1", "Paragraph text 2", "Paragraph text 3", "paragraph text 4"];
function updateLabel(){
    $("h3").html(content[currentCount++]);
    if(currentCount == MAX_CLICK_COUNT) $("button").hide();
}

这是
对不起，我应该更清楚地说明我的问题。文本1应该代表一个段落。文本2和文本1的区别不仅仅在于数字。整个内容将有所不同。很抱歉我应该说得更清楚。对不起，我应该更清楚地回答我的问题。文本1应该代表一个段落。文本2和文本1的区别不仅仅在于数字。整个内容将有所不同。很抱歉我应该说得更清楚些。