Question

我找到了一个代码，用于在引导程序缩略图中显示xml数据。我添加了一个JavaScript代码来随机显示所有缩略图。页面刷新时，需要随机显示该缩略图。但是我的代码无法正常工作。我该如何解决该问题？

这是代码。

$(document).ready(function() {
  $.ajax({
    type: "GET",
    url: "test.xml",
    dataType: "xml",
    success: showCD
  });
});

function showCD(xml) {
  xml = $(xml).children();
  let i = 0;

  $(xml).children().each(function() {
    let TITLE = $(this).find("TITLE").text();
    let ARTIST = $(this).find("ARTIST").text();
    let COUNTRY = $(this).find("COUNTRY").text();
    let COMPANY = $(this).find("COMPANY").text();

    let html = `<div class="col-md-4">
                    <div class="thumbnail" id="random">
                      <p>${TITLE}</p>
                      <p>${ARTIST}</p>
                      <p>${COUNTRY}</p>
                      <p>${COMPANY}</p>
                    </div>
                    </div>`;

    i++;

    if (i <= 3) {
      $("#xmldata").append(html);
      $("#xmldataall").append(html);
    } else {
      $("#other").append(html);
    }

  });
}

$(function() {
 $("#random").html($("#random").children().sort(function() { return 0.5 -    Math.random() }));
});    }

<div class="row" id="xmldata"></div>


<input type="button" value="View All" id="myButton1" class="reveal" style="float: right;" onclick="toggler('toggle_container');">

<div id="toggle_container" class='hide'>
  <div class="block">
    <div class="row" id="other"></div>
  </div>
</div>

http://next.plnkr.co/edit/mE9TTWknILVAu3YY?open=lib%2Fscript.js

Answer 1

sort函数不会影响元素的DOM顺序，它只会对jQuery返回的项目列表进行排序。

您可以做的是如下修改代码：

function showCD(xml){
    var items = $(xml).children().children();
    items.sort(function() { return 0.5 - Math.random() });

    let i = 0;

    items.each(function () {                    
        let TITLE = $(this).find("TITLE").text();
        let ARTIST =$(this).find("ARTIST").text();
        let COUNTRY = $(this).find("COUNTRY").text();
        let COMPANY =$(this).find("COMPANY").text();

        let html = `<div class="col-md-4" id="random">
                    <div class="thumbnail">
                      <p>${TITLE}</p>
                      <p>${ARTIST}</p>
                      <p>${COUNTRY}</p>
                      <p>${COMPANY}</p>
                    </div>
                    </div>`;

        i++;

        if(i <= 3)    {
            $("#xmldata").append(html);
            $("#xmldataall").append(html);
        }
        else{            
            $("#other").append(html);
        }

    });
}

并删除此部分：

$("#random").html($("#random").children().sort(function() { return 0.5 -    Math.random() }));

如何以随机顺序显示缩略图？

1 个答案: