javascript - 使用 JavaScript 操作多个(可预测的)命名 DIV

Question

我想在可预测命名的 html div 组上重复执行一个函数。

我正在使用如下所示的拖放关系，其中将文本拖动到某个 div 空间“目标”会导致该文本出现在另一个名为“saves”的 div 中。

<script type="text/javascript">
        function OnDragStart (event) {
            if (event.dataTransfer) {
                var format = "Text";
                var textData = event.dataTransfer.getData (format);


            }
        }

        function OnDropTarget (event) {
            if (event.dataTransfer) {
                var format = "Text";
                var textData = event.dataTransfer.getData (format);
                if (!textData) {
                    textData = "<span style='color:red'>The data transfer contains no text data.</span>";
                }

                var savesDiv = document.getElementById ("saves");
                savesDiv.innerHTML = savesDiv.innerHTML + "<br />" + textData;
            }
            else {
                alert ("Your browser does not support the dataTransfer object.");
            }

            if (event.stopPropagation) {
                event.stopPropagation ();
            }
            else {
                event.cancelBubble = true;
            }
            return false;
        }
    </script>

• 该脚本与相应的 html 相结合，非常适合目标和保存的 div...但我真正想要的是将相同的脚本应用于一组名为的 div 对(目标1，保存1)(目标2，保存2)(目标 3，保存 3)(目标4保存4)等等等等div id 中的数字每次都会增加 1 直到(target20，保存 20)...在引用所有目标和保存的 div 时，显然不会使用不同的 id 名称重复相同的脚本 20 次。
• 我意识到这完全是一个新手问题，但我真的很想了解解决这个问题的不同方法。

Answer 1

给这些div赋予一个共同的类名，这样当拖放事件发生时，可以使用类名而不是id来处理；也就是说，类似于 $('.someClass').someEvent 而不是 $('#target1')。您可以使用 $(this).attr("id") 在此函数内获取其 id 属性。

因此，如果您将“target1”作为 id，请使用 JavaScript substring 函数获取最后一个字符(“1”)；您可以编写如下通用代码:

$('.someClass').someEvent(function(){
  var id=$(this).attr(id);
  var lastno=id.substring(id.lastIndexOf("t"),id.length);

  //now rest of code
  $("#saves"+lastno).val($("#target"+lastno).val());
});