Имеется контейнер в котором находятся блоки с текстом. Каждый блок в свою очередь разделен на части. Все блоки скрыты. При клике на кнопку "читать текст" рандомно выбирается блок и показывается первая его часть с копкой "далее", при нажатии на которую скрывается первая часть текста и показывается вторая. И так до тех пор пока не закончатся все части текста. В последней части имеется кнопка "читать снова", при нажатии на которую скрывается последняя открытая часть текста и начинается новый рандомный выбор и показ блока с текстом.
Тот код что я написал работает правильно если выбор блока с текстом меняется, но в случае если выбор падает на тот же блок что показывается в данный момент, этот блок не начинает показываться заново, т.е. снова его первая часть. Как это исправить?
html:
<button class="btnRead">Читать текст</button>
<div class="wrapper">
<div class="text1 hide">
<div class="part1">
Текст 1. Часть 1////////
<button class="btn btn1">Далее</button>
</div>
<div class="part2 hide">
/////Текст 1. Часть 2////
<button class="btn btn2">Далее</button>
</div>
<div class="part3 hide">
//////Текст 1. Часть 3
<button class="btnMore">Читать снова</button>
</div>
</div>
<div class="text2 hide">
<div class="part1">
Текст 2. Часть 1////////
<button class="btn btn1">Далее</button>
</div>
<div class="part2 hide">
/////Текст 2. Часть 2////
<button class="btn btn2">Далее</button>
</div>
<div class="part3 hide">
//////Текст 2. Часть 3
<button class="btnMore">Читать снова</button>
</div>
</div>
</div>
css:
.hide {
display: none;
}
js:
$('.btnRead').click(function(){
choicePart();
});
function choicePart(){
var text = $('.text' + randomNumber(1, 2)); // рандомный выбор текстового блока
text.fadeIn(300);
bitBlock(text, '.btn1', '.part2');
bitBlock(text, '.btn2', '.part3');
text.find('.btnMore').click(function(){
choicePart();
});
}
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// переход по клику к следующей части текста
function bitBlock(blockText, button, nextPart){
blockText.find(button).click(function(){
var partOut = $(this).parent();
var partIn = blockText.find(nextPart);
partOut.fadeOut(700);
partOut.replaceWith(partIn);
partIn.fadeIn(700);
});
}