如何在数组中存储唯一的函数名答案

【问题标题】：How to store unique function name in array如何在数组中存储唯一的函数名
【发布时间】：2015-12-13 03:33:00
【问题描述】：

我正在编写我的代码并想弄清楚如何将可拖动对象存储到数组中，因为我正在创建一个数学游戏，它将识别可拖动元素并确定问题是否正确，这是我的代码

<script>
        $(function() {
            $( "#draggable1" ).draggable();
        });
  </script>
 <script>
        $(function() {
            $( "#draggable2" ).draggable();
        });
  </script>
 <script>
        $(function() {
            $( "#draggable3" ).draggable();
        });
  </script>
 <script>
        $(function() {
            $( "#draggable4" ).draggable();
        });
  </script>
 <script>
        $(function() {
            $( "#draggable5" ).draggable();
        });
  </script>
 <script>
        $(function() {
            $( "#draggable6" ).draggable();
        });
  </script>
 <script>
        $(function() {
            $( "#draggable7" ).draggable();
        });
  </script>
 <script>
        $(function() {
            $( "#draggable8" ).draggable();
        });
  </script>

然后我试图将这些可拖动元素放入一个数组中

<div data-role="main" class="ui-content">
<script>
var theimagestwo = new Array();
theimagestwo[1] = "#draggable1";
theimagestwo[2] = "#draggable2";
document.getElementById("pagethree").innerHTML = theimagestwo[1];
</script>

我做错了什么？它们只是作为文本出现

【问题讨论】：

标签： javascript jquery html css jquery-mobile

【解决方案1】：

看看你的这部分代码（我添加了 cmets）：

// Create a new array
var theimagestwo = new Array();

// Push the strings "#draggable1" and "#draggable2" into the array
theimagestwo[1] = "#draggable1";
theimagestwo[2] = "#draggable2";

// Set inner HTML as theimagestwo[1] (which is "#draggable1")
document.getElementById("pagethree").innerHTML = theimagestwo[1];

所以，正如你所说，结果是“作为文本出现”，因为它是文本。

如果我理解正确，您希望#pagethree 的内容成为element #draggable1（而不是string "#draggable1"）。所以你应该将上面的代码替换为：

var theimagestwo = new Array();
theimagestwo[1] = $("#draggable1");
theimagestwo[2] = $("#draggable2");
$("#pagethree").empty().append(theimagestwo[1]);

【讨论】：

真棒这工作，如果我想编写多个 html 文件，例如如果我这样做 $("#pagethree").empty().append(theimagestwo[1]);和 $("#pagethree").empty().append(theimagestwo[2]);它只显示其中一个
@artbarzz 你只需 empty() 元素一次，然后你 append() 尽可能多的子元素..
你为什么要使用new Array()构造函数而不是[]

【解决方案2】：

您可以为此创建一个函数并使用 .each() 循环遍历

$('[id^="draggable"]').each(function(){ // [id^="draggable"] mean select all elements there ids starts with draggable
    makeItDraggaple($(this));
});


function makeItDraggaple(el){
    el.draggable();
    $("#pagethree").append(el);
}

Working Demo

或者你可以使用 .each() 而不需要函数

$('[id^="draggable"]').each(function(){ // [id^="draggable"] mean select all elements there ids starts with draggable
     $(this).draggable();
     $("#pagethree").append($(this));
 });

Demo

【讨论】：

我不明白你能提供小提琴吗？
@artbarzz 用演示更新了答案 .. 现在所有以可拖动开头的 id 都是可拖动的

【解决方案3】：

在@Mohamed-Yousef 的回答之上，如果您希望将所有这些元素放在“pagethree”容器中，您可以通过添加一行来做到这一点：

$('[id^="draggable"]').each(function(){
    makeItDraggaple($(this));
    $(this).appendTo("#pagethree");
});

两次执行$(this) 效率低下，并且可能没有在某处缓存$("#pagethree")。但这是一个（未经测试的！）开始。

【讨论】：