随机div，请帮帮我

Question

这段代码正常工作，它显示5个带有相应文本的随机图像。我的问题是我想将文本分成另一个div，以便可以向其添加另一个功能，但是我仍然希望图像随机带有相应的文本。

<script type="text/javascript">
/*<![CDATA[*/
$(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>

Answer 1

通常，您违反了许多最佳做法。 text不是有效的标签。 是否有任何理由将文本分隔到另一个div中？ 有什么理由显示所有元素，隐藏它们并比仅随机显示5个（您可以直接随机仅显示5个）吗？

但是，您可以这样解决：

<div class="image image1"><img src="image1"/></div>
<div class="text text1"><text id="id1">1</text></div>

<div class="image image2"><img src="image2"/></div>
<div class="text text2"><text id="id2">2</text></div>

并且比在JS上隐藏图像和文本：

$(".image").hide();
$(".text").hide();

并且比代替elements.eq(rand).show(); 您可以根据ID选择：

$(".image"+(rand+1)).show(); // rand+1 because rand can be [0,8) in your case
$(".text"+(rand+1)).show();

或者，如果可以将始终合并在一起的元素包装为一个包装，则更好。

Answer 2

希望这可以帮助

 <div class="Image"><img width="200" height="200" src="1.jpg"/><div id="id1">1</text></div> <div class="Image"><img width="200" height="200" src="2.jpg"/><div id="id2">2</text></div> <div class="Image"><img width="200" height="200" src="3.jpg"/><div id="id3">3</text></div> <div class="Image"><img width="200" height="200" src="4.jpg"/><div id="id4">4</text></div> <div class="Image"><img width="200" height="200" src="5.jpg"/><div id="id5">5</text></div> <div class="Image"><img width="200" height="200" src="6.jpg"/><div id="id6">6</text></div> <div class="Image"><img width="200" height="200" src="7.jpg"/><div id="id7">7</text></div> <div class="Image"><img width="200" height="200" src="8.jpg"/><div id="id8">8</text></div>