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();

或者，如果你可以将总是在一个div中的元素包装在一起作为包装器，那就更好了。

Answer 2

希望这有帮助

＆＃13;

<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>

＆＃13;

随机div，请帮帮我

2 个答案: