Question

我想要的是创建一个标签或将其声明为每个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>

Answer 1

我会像jQuery UI Sortable之类的东西那样做

演示：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"之类的类，而不是我当前的{{1并适当地更改jQuery选择器。

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

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

id="sortable"

然后你正确地初始化它（但记得把所有东西放在文件准备好的事件callaback中）

//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>');

随心所欲地设计风格。请注意，我的解决方案需要jQuery，jQuery UI和jQuery UI CSS（可选，如果您自己添加更多css）。

声明每个shuffles字符串数组元素

1 个答案: