0

我正在尝试打乱关键字列表并将它们放入文本幻灯片中的单个 div 中。

这是我的脚本：

var keys = ["dancing.", "computers.", "food.", "movies.", "singing.", "hiking.", "math.", "music.", "reading.", "cars.", "laughing.", "animals.", "cupcakes.", "shopping.", "soccer.", "Europe.", "photography.", "volunteering.", "outerspace.", "traveling.", "guitar.", "painting.", "children.", "boats.", "science.", "art.", "cheerleading.", "Einstein.", "teaching.", "politics.", "waterskiing.", "volleyball.", "whittling.", "volleyball.", "running.", "comedy.", "theater.", "Africa."];

keys.sort(function() { return Math.floor(Math.random()*3 -1)});

for(i = 0; i < keys.length; i++) {
    ("<div>" + keys[i] + "</div>").appendTo("slideshow");   
}

function randomize(myArray) {
  var i = myArray.length;
  if ( i == 0 ) return false;
  while ( --i ) {
     var j = Math.floor( Math.random() * ( i + 1 ) );
     var tempi = myArray[i];
     var tempj = myArray[j];
     myArray[i] = tempj;
     myArray[j] = tempi;
   }
}

<td class="align-top">
   <div class="slideshow"></div>
</td>

有任何想法吗？我还认为我的 javascript 和 jQuery 混合不好。你能帮我清理一下吗？

4

4 回答 4

2

试试这个：

keys.sort(function() { return Math.random() - 0.5; });

var $slideshow = $(".slideshow");
for(var i = 0; i < keys.length; i++) {
    $slideshow.append("<div>" + keys[i] + "</div>");   
}

演示：http: //jsfiddle.net/XpyYX/1/

您的代码不起作用，因为在这一行：

("<div>" + keys[i] + "</div>").appendTo("slideshow");

您在 open 之前省略了$or jQueryfrom (，并且因为您想附加到".slideshow"（使用 a .）以按类选择元素。它会像这样工作：

$("<div>" + keys[i] + "</div>").appendTo(".slideshow");

...但是缓存对幻灯片元素的引用应该更有效。

此外，您的随机排序过于复杂。

于 2012-09-23T01:53:06.147 回答
0

试试这个：

while(keys.length > 0)
{
    var k = Math.floor(Math.random()*keys.length);
    $("<div>"+keys[k]+"</div>").appendTo('.slideshow');
    keys.slice(k, 1);
}
于 2012-09-23T01:59:13.320 回答
0

你可以使用

var keys = ["dancing", "computers", "food", "movies", "singing", "hiking", "math", "music", "reading", "cars", "laughing", "animals", "cupcakes", "shopping", "soccer", "Europe", "photography", "volunteering", "outerspace", "traveling", "guitar", "painting", "children", "boats", "science", "art", "cheerleading", "Einstein", "teaching", "politics", "waterskiing", "volleyball", "whittling", "volleyball", "running", "comedy", "theater", "Africa"];

var el=document.getElementById('slideshow'),
    temp=document.createElement('div');
for(var i=0;i<keys.length;i++){
    var current=temp.cloneNode(false);
    current.appendChild(document.createTextNode(keys[i]+'.'));
    var position=Math.floor(Math.random()*(el.childNodes.length+1));
    if(position==el.childNodes.length){
        el.appendChild(current);
    }else{
        el.insertBefore(current,el.childNodes[position]);
    }
}

演示：http: //jsfiddle.net/UFdbm/

备注：

  • 您可以删除元素末尾的点并稍后添加
  • 请参阅https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/sort。如果使用.sort(compareFunction),compareFunction(a, b)在给定一对特定元素a并b作为其两个参数时，必须始终返回相同的值。如果返回不一致的结果，则排序顺序未定义。因此，您不能使用在对数组进行排序时返回随机值的函数。

编辑：

您可以使用 jQuery 稍微简化一下：

var keys = ["dancing", "computers", "food", "movies", "singing", "hiking", "math", "music", "reading", "cars", "laughing", "animals", "cupcakes", "shopping", "soccer", "Europe", "photography", "volunteering", "outerspace", "traveling", "guitar", "painting", "children", "boats", "science", "art", "cheerleading", "Einstein", "teaching", "politics", "waterskiing", "volleyball", "whittling", "volleyball", "running", "comedy", "theater", "Africa"];

var el=$('#slideshow');
for(var i=0;i<keys.length;i++){
    var current=$("<div>"+keys[i]+".</div>");
    var position=Math.floor(Math.random()*(el.children().length+1));
    if(position==el.children().length){
        el.append(current);
    }else{
        current.insertBefore(el.children().eq(position));
    }
}

演示：http: //jsfiddle.net/UFdbm/1/

于 2012-09-23T02:04:50.760 回答
0 
var keys = ["dancing.", "computers.", "food.", "movies.", "singing.", "hiking.", "math.", "music.", "reading.", "cars.", "laughing.", "animals.", "cupcakes.", "shopping.", "soccer.", "Europe.", "photography.", "volunteering.", "outerspace.", "traveling.", "guitar.", "painting.", "children.", "boats.", "science.", "art.", "cheerleading.", "Einstein.", "teaching.", "politics.", "waterskiing.", "volleyball.", "whittling.", "volleyball.", "running.", "comedy.", "theater.", "Africa."];

var insertionSort = function (arr) {
    var len = arr.length, i = -1, j, tmp;

    while (len--) {
        tmp = arr[++i];
        j = i;
        while (j-- && arr[j] > tmp) {
            arr[j + 1] = arr[j];
        }
        arr[j + 1] = tmp;
    }
};

insertionSort(keys);
alert(keys);
for(i = 0; i < keys.length; i++) {
    $("<div>"+keys[k]+"</div>").appendTo('.slideshow');

}

试试这个

于 2012-09-23T02:12:59.123 回答