Укладка текста над другим текстом в ответ на кнопку

Question

Итак, я пытаюсь понять это, и я совсем потерялся. Это то, что я хотел бы, чтобы моя программа выполняла.

TEXT1 

button 

Когда я нажимаю кнопку, я хотел бы, чтобы это произошло:

TEXT2 

button 

Когда я снова нажать на кнопку, я хотел бы:

TEXT3 

button 

И последний текст , Я бы хотел, чтобы кнопка исчезла:

TEXT4 

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

Теперь, это ближе всего к моей работе по производству этого эффекта. Я бы назначил класс всем моим TEXT. Назовем это Texts. И я дам свою кнопку классу. Назовем это readMore. И до readMore Я позвоню, click(function({})). Поэтому, когда я нажимаю кнопку, я бы назвал fadeOut()(this), который является текущим текстом, TEXT1. А затем позвоните fadeIn() в (next), что составляет TEXT2. Но тогда проблема заключается в том, что (This) всегда будет ссылаться на TEXT1, а (next) всегда будет ссылаться на TEXT2. Так что это моя проблема. Любые возможные решения?

Это мой код, который я придумал:

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

Answer 1

Вы можете использовать позицию абсолютную для текстов блоков, но вам нужен фиксированный контейнер высоты для него. Также вы можете сделать текстовый контейнер для показа и скрыть все тексты в блоках с помощью display: none; и заменить html на него на видимый контейнер

Answer 2

Ваша логика кажется правильной. У вас есть событие click на кнопке, и каждый раз, когда вы нажимаете на него, вы меняете текст. Вы можете изменить текст, изменив innerHTML элемента $('.texts'). Кроме того, чтобы иметь различные текстовые номера 1, 2, 3 и т.д. Вы можете добавить глобальную переменную var globalCounter = 0; и увеличить globalCounter на 1.

Так что-то вроде ниже код должен работать:

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

Кроме того, если вы хотите, чтобы кнопка исчезла при отображении текста 4, вы можете добавить простой оператор if, который проверяет переменную globalCounter.Когда это 4 вы можете установить display свойство кнопки на none

Answer 3

Вот код:

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

И here's the fiddle!

---

Update:

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(); 
} 

И вот the updated fiddle!