Question

我想只在选择了上一个容器的子容器后才显示下一个容器。

<section class="section-blue" id="question1">
    <div class="container">
        <h1 class="question-heading">Q1: WHO ARE YOU MOST LIKE?</h1>
        <div class="row">
            <div class="col-xs-4 text-center">
                <a href="#question2"><img src="../images/1.png" class="img-rounded image-sizes" alt="Cinque Terre">
                    <br>
                    <p style="color: white;">THOMAS EDISON</p>
                </a>
            </div>
            <div class="col-xs-4 text-center">
                <a href="#question2"><img src="../images/2.png" class="img-rounded image-sizes" alt="Cinque Terre">
                    <br>
                    <p style="color: white;">ALBERT EINSTEIN</p>
                </a>
            </div>
            <div class="col-xs-4 text-center">
                <a href="#question2"><img src="../images/3.png" class="img-rounded image-sizes" alt="Cinque Terre">
                    <br>
                    <p style="color: white;">NELSON MANDELA</p>
                </a>
            </div>
        </div>
    </div>
</section>
<section class="section-red" id="question2">
    <div class="container">
        <h1 class="question-heading">Q2: WHAT’S YOUR PREFERENCE?</h1>
        <div class="row center-block">
            <div class="col-xs-4 text-center">
                <a href="#question3"><img src="../images/4.png" class="img-rounded image-sizes" alt="Cinque Terre">
                    <br>
                    <p style="color: white;">CHESS</p>
                </a>
            </div>
            <div class="col-xs-4 text-center">
                <a href="#question3"><img src="../images/5.png" class="img-rounded image-sizes" alt="Cinque Terre">
                    <br>
                    <p style="color: white;">FOOTY</p>
                </a>
            </div>
            <div class="col-xs-4 text-center">
                <a href="#question3"><img src="../images/6.png" class="img-rounded image-sizes" alt="Cinque Terre">
                    <br>
                    <p style="color: white;">LEGO</p>
                </a>
            </div>
        </div>
    </div>
</section>

因此，当您第一次打开网页时，应显示问题＃1，然后一旦您点击其中一张图片，就会转到问题＃2。问题＃2将被隐藏，直到问题＃1的孩子被点击为止。

Have a look at my codepen here

这里可以找到我想要实现的一个很好的例子 https://www.randstad.co.uk/ugc/found/tech-entrepreneur-match/

Answer 1

我已经整理了一个codepen来做你想做的事。

它的工作原理如下：

首先使用CSS隐藏所有部分
根据dom中的订单编号部分
显示第一部分
为每个答案点击绑定一个处理程序以获取父节的索引，并根据该节显示下一节（以及突出显示）

我添加了几个CSS类（section，section.highlight和answer），但这里的本质是：

$(() => {
  init();
});

function init() {
  numberSections();
  bindAnswerClick();
  showSection(0);
}

function numberSections() {
  $(".section").each((index, elem) => {
    $(elem).data("index", index);
    $(elem).attr("data-index", index);
  });
}

function bindAnswerClick() {
  $(".answer").on("click", (e) => {
    selectAnswer($(e.currentTarget));
  });
}

function selectAnswer($answer) {
  let $section = $answer.closest(".section");
  let nextIndex = parseInt($section.data("index")) + 1;

  $section.find(".answer").removeClass("highlight");
  $answer.addClass("highlight");

  showSection(nextIndex);
}

function showSection(index) {
  $(".section[data-index='" + index + "']").show();
}

上一部分完成后显示下一个容器

1 个答案: