我有一个单页网站,在视口内点击显示/隐藏部分。
这是其中一个部分的示例:
<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/