用随机链接显示/隐藏div

时间:2017-09-19 12:52:04

标签: javascript jquery css html5

我有一个单页网站,在视口内点击显示/隐藏部分。

这是其中一个部分的示例:

<section id="question1">
    <div class="container-fluid">
        <div class="row">
            <div class="question-container">
                <div class="question-box">
                    <p>What is the answer to this question?</p>
                </div>
            </div>
            <a href="#">
                <div id="cheetah" class="col-xs-12 col-lg-6">
                    <img src="images/cheetah.jpg" class="img-responsive" />
                </div>
            </a>
            <a href="#">
                <div id="hedgehog" class="col-xs-12 col-lg-6">
                    <img src="images/hedgehog.jpg" class="img-responsive" />
                </div>
            </a>
        </div>
    </div>
</section>

我遇到的问题是我不希望章节ID与其中的标签href相同。如果这有道理?这是我已经拥有的jQuery:

$(document).ready(function(){
     //ID array
   var questionArray = ['#question1', '#question2', '#question3', '#question4', '#question5', '#question6', '#question7', '#question8', '#question9', '#question10'];
    //collect sections and place in array
    var sectionArray = [];
    $('section').each(function(){
        sectionArray.push(this);
    })
    //randomise id array
    questionArray.sort(function() {
        return 0.5 - Math.random()
        });
    //Target a elements - attach ID to next question
    for(var i = 0; i < sectionArray.length; i++) {
        var aEl = $(sectionArray[i]).find('a');
        $(aEl).each(function(){
            $(this).attr('href', questionArray[i]);
        })
    }

}

任何帮助?

编辑:

指向codepen的链接:https://codepen.io/samrbrown/full/aLdgYK/

0 个答案:

没有答案