声明每个洗牌字符串数组元素 - Declare each shuffles string array elements

Declare each shuffles string array elements

本文关键字：字符串数组元素声明 | 更新日期: 2023-09-27

我想要的是为每个shuffles字符串数组元素创建一个标签或声明它，这样我就可以将每个shuffles字符串数组元素应用于拖放。．这里有三个字符串数组元素。在应用下面代码中的shuffle函数之后，它将显示如下

 <script>
 //Parses the variable from php to this Javascript part
 var js_var = "<?php echo $output ?>";
 //document.write(js_var);
 //Splits the string when the delimiter # is detected
  var split_str= js_var.split("#");
 //var js_var = "Try123";
 //displays original string
  document.writeln(js_var+"<br >"+"<br >");

 //sent to shuffle(o) function to scramble the elements
  var shuffle_str = shuffle(split_str);
 //displays each of the shuffled string array elements
  for (i=0;i<shuffle_str.length;i++)
{
 document.write(shuffle_str[i] + "<br >");
}
 //document.writeln(js_var);
 function shuffle(o){ //v1.0
  for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j]  
   = x);
  return o;
};

</script>
<button id="showcontent" onclick="window.location.reload()">Scramble</button>
</body>

我会用jQuery UI排序表来做这个

演示:http://jsfiddle.net/BGDEe/

HTML:

<ul id="sortable">
    <li class="ui-state-default">Jane likes</li>
    <li class="ui-state-default">to</li>
    <li class="ui-state-default">read book</li>
</ul>

CSS:

 #sortable {
     list-style-type: none;
     margin: 0;
     padding: 0;
 }
 #sortable li {
     margin: 3px 3px 3px 0;
     padding: 1px;
     float: left;
     font-size: 12px;
     text-align: center;
     cursor: pointer;
     border-color: transparent;
     background: none;
 }
 #sortable li.ui-state-highlight {
    height: 15px;
    width: 20px;
 }
 #sortable:hover li {
     border-color: #d3d3d3;
     background-color: #FFFFFF;
 }

JS:

$("#sortable").sortable({
    cursor: 'move',
    placeholder: "ui-state-highlight",
    update: function () {}
});
$("#sortable").disableSelection();

这将很好地处理拖放，如果你想处理拖放结果，你只需在update: function () {}中添加代码。

留给你的一切，是生成适当的HTML，其中每个词都在单独的<li>元素中进行拖放，并使用像class="shuffle-word"这样的类，而不是我目前的id="sortable"，并适当地改变jQuery选择器。

因为你的问题和例子很难理解，我将留下我的例子，希望你能自己解决它。

我将添加生成HTML的部分是这个

//displays each of the shuffled string array elements
document.write('<ul class="shuffle-word">');
for (i=0; i < shuffle_str.length; i++) {
    document.write('<li class="ui-state-default">'+shuffle_str[i]+'</li>');
}
document.write('</ul>');

然后正确地初始化它(但要记住将所有内容放在document ready event callback中)

$(".shuffle-word").sortable({
    cursor: 'move',
    placeholder: "ui-state-highlight",
    update: function () {}
});
$(".shuffle-word").disableSelection();

和样式你喜欢。请注意，我的解决方案需要jQuery, jQuery UI和jQuery UI CSS(可选，如果你自己添加更多的CSS)。