如何使用javascript更改html中元素的顺序

时间:2016-05-31 14:39:42

标签: javascript jquery html css

我正在制作一个有9个分区的简单游戏,每个8个分区都有一个隐藏在其中的企鹅,而第9个分区有一个怪物。现在我的游戏运行正常,但我想要做的是每次加载页面时,分区的排列都应该改变,以便为游戏添加随机性。

这是我的代码:

$(document).ready(function() {
  //This code will run after your page loads
  $('body').on('mousedown', '.yeti', function(event) {
    alert("Yaaaarrrr!");
  });
});
<div class="gameholder">
  <div class="title"></div>
  <div class="penguin1"></div>
  <div class="penguin2"></div>
  <div class="penguin3"></div>
  <div class="penguin4"></div>
  <div class="penguin5"></div>
  <div class="penguin6"></div>
  <div class="penguin7"></div>
  <div class="penguin8"></div>
  <div class="yeti"></div>
</div>

在向div添加图片和定位后,这就是它的外观

:

2 个答案:

答案 0 :(得分:3)

保持您的动物

考虑为您的所有游戏元素创建一个容器,因为您只想随机化他们的订单,因为您不希望所有这些都混淆了标题:

<div class='game-container'>
    <div class="penguin1"></div>
    <div class="penguin2"></div>
    <div class="penguin3"></div>
    <div class="penguin4"></div>
    <div class="penguin5"></div>
    <div class="penguin6"></div>
    <div class="penguin7"></div>
    <div class="penguin8"></div>
    <div class="yeti">
</div>

改变他们

这应该使他们更容易通过像this related thread中提到的简单的jQuery扩展函数随机化:

$.fn.randomize = function(selector){
    (selector ? this.find(selector) : this).parent().each(function(){
        $(this).children(selector).sort(function(){
            return Math.random() - 0.5;
        }).detach().appendTo(this);
    });
    return this;
};

您可以将这两种方法结合起来,然后在页面加载时简单地调用以下内容:

$(document).ready(function(){
    // Define your randomize function here

    // Randomize all of the elements in your container
    $('.game-container').randomize('div');
});

示例

enter image description here

$.fn.randomize = function(selector){
    (selector ? this.find(selector) : this).parent().each(function(){
        $(this).children(selector).sort(function(){
            return Math.random() - 0.5;
        }).detach().appendTo(this);
    });

    return this;
};
// Randomize all of the <div> elements in your container
$(".game-container").randomize('div');
.game-container { width: 300px; }

.penguin { background: url('http://vignette1.wikia.nocookie.net/farmville/images/b/be/Baby_Penguin-icon.png/revision/latest?cb=20110103080900'); height: 100px; width: 100px; display: inline-block; }
.yeti { background: url('http://www.badeggsonline.com/beo2-forum/images/avatars/Yeti.png?dateline=1401638613'); height: 100px; width: 100px; display: inline-block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class='game-container'>
  <div class='penguin'></div>
  <div class='penguin'></div>
  <div class='penguin'></div>
  <div class='penguin'></div>
  <div class='penguin'></div>
  <div class='penguin'></div>
  <div class='penguin'></div>
  <div class='yeti'></div>
  <div class='penguin'></div>
</div>

答案 1 :(得分:0)

<body>
    <div class="gameholder">
        <div class="title"></div>
        <div class="penguin1"></div>
        <div class="penguin2"></div>
        <div class="penguin3"></div>
        <div class="penguin4"></div>
        <div class="penguin5"></div>
        <div class="penguin6"></div>
        <div class="penguin7"></div>
        <div class="penguin8"></div>
        <div class="yeti"></div>
    </div>
    <script type="text/javascript">
    $(document).ready( function() {
    $('.gameholder div').shuffle();

   /*
   * Shuffle jQuery array of elements - see Fisher-Yates algorithm
   */
   jQuery.fn.shuffle = function () {
        var j;
        for (var i = 0; i < this.length; i++) {
            j = Math.floor(Math.random() * this.length);
            $(this[i]).before($(this[j]));
        }
        return this;
    };

    //This code will run after your page loads
    $('body').on('mousedown', '.yeti', function(event) {

        alert("Yaaaarrrr!");

    });
});
</script>

在这里,您想知道这两行代码正在做什么 - &gt;

j = Math.floor(Math.random() * this.length); // (1)
$(this[i]).before($(this[j])); // (2)
  1. 在第1行首先,我使用Math.random获取随机数,Math.random为您提供从0到1的浮点数。所以这里我将这个数字与长度相乘,所以它给出了从零到长度的随机浮点数,现在我将这个数字放到整数,得到从0到长度的整数 - 1

  2. 如果我们之前有一个选择器$(&#39;#b&#39;)(&#39;#a&#39;)那么它会将#a元素放在#b元素之前,所以这里我们逐个元素并按随机顺序排列。