I have a code that displays 5 random images with corresponding text. My challenge is that I want to separate the text into another div so that I can add another function to it, while still keeping the images random with their corresponding text.
<script type="text/javascript">
$(document).ready(function() {
$(".Image").hide();
var elements = $(".Image");
var elementCount = elements.size();
var elementsToShow = 5;
var alreadyChoosen = ",";
var i = 0;
while (i < elementsToShow) {
var rand = Math.floor(Math.random() * elementCount);
if (alreadyChoosen.indexOf("," + rand + ",") < 0) {
alreadyChoosen += rand + ",";
elements.eq(rand).show();
++i;
}
}
});
</script>
<div class="Image"><img src="image1"/><text id="id1">1</text></div>
<div class="Image"><img src="image2"/><text id="id2">2</text></div>
<div class="Image"><img src="image3"/><text id="id3">3</text></div>
<div class="Image"><img src="image4"/><text id="id4">4</text></div>
<div class="Image"><img src="image5"/><text id="id5">5</text></div>
<div class="Image"><img src="image6"/><text id="id6">6</text></div>
<div class="Image"><img src="image7"/><text id="id7">7</text></div>
<div class="Image"><img src="image8"/><text id="id8">8</text></div>