0

Имеется контейнер в котором находятся блоки с текстом. Каждый блок в свою очередь разделен на части. Все блоки скрыты. При клике на кнопку "читать текст" рандомно выбирается блок и показывается первая его часть с копкой "далее", при нажатии на которую скрывается первая часть текста и показывается вторая. И так до тех пор пока не закончатся все части текста. В последней части имеется кнопка "читать снова", при нажатии на которую скрывается последняя открытая часть текста и начинается новый рандомный выбор и показ блока с текстом.
Тот код что я написал работает правильно если выбор блока с текстом меняется, но в случае если выбор падает на тот же блок что показывается в данный момент, этот блок не начинает показываться заново, т.е. снова его первая часть. Как это исправить?

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

1 ответ 1

0

У вас подход изначально неправильный, как-то так набросал на скорую руку:

$('.btnRead').click(function() {
  choicePart();
});

$('.btnMore').click(function() {
  $(this).parent().hide().closest('.container').hide().children('.part1').show();
  choicePart();
});

$('.next').click(function() {
  $(this).parent().hide().next().show();
});

function choicePart() {
  var text = $('.text' + randomNumber(1, 2));

  text.fadeIn(300);
}

function randomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btnRead">Читать текст</button>

<div class="wrapper">
  <div class="text1 container hide">
    <div class="part1">
      Текст 1. Часть 1////////
      <button class="btn next">Далее</button>
    </div>

    <div class="part2 hide">
      /////Текст 1. Часть 2////
      <button class="btn next">Далее</button>
    </div>
    <div class="part3 hide">
      //////Текст 1. Часть 3
      <button class="btnMore">Читать снова</button>
    </div>
  </div>
  <div class="text2 container hide">
    <div class="part1">
      Текст 2. Часть 1////////
      <button class="btn next">Далее</button>
    </div>
    <div class="part2 hide">
      /////Текст 2. Часть 2////
      <button class="btn next">Далее</button>
    </div>
    <div class="part3 hide">
      //////Текст 2. Часть 3
      <button class="btnMore">Читать снова</button>
    </div>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.