当我创建新包并添加两个或更多盒子时，所有盒子的id将与最后一个盒子的id相同

When I create new package and add two or more box, all boxes id is going to be same to the last boxes id

本文关键字：盒子 id 相同 最后一个 添加 新包 创建 两个      更新时间：2023-09-26

当我创建新包并添加两个或多个盒子时，所有盒子的id将与最后一个盒子的id相同。我想让所有的盒子都有不同的id。例如，第一个盒子的id=pack0，第二个盒子的id=1，等等。

    function Pack() {  
    Pack.id = "pack" + packList.length;
    Pack.items = [];
    Pack.ShipTo = 0;
    Pack.ShipFr = 0;
    packList. push(Pack);
    document.getElementById("packCount").value = packList.length;
    var pkgs = document.getElementById("packages")
}
Pack.items = [];
Pack.ShipTo = 1234;
Pack.ShipFr = 9876;
var packList = [];
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
  // Pack.items.pop(ev.target.id)
}

function drop(ev) {
    ev.preventDefault();
    debugger;
    var data = ev.dataTransfer.getData("text");
    var itemToMove = document.getElementById(data);
    ev.target.appendChild(itemToMove);  
}

function checkAdult(idToFind) {
    for (i = 0;packList.length;++i)
    {
                   if( packList[i].id == idToFind)
                {
                return packList[i];
                }
    }
return null;
}

function createPackageClick(e) {

    var itm = document.getElementById(packList[0].id);
    var cln = itm.cloneNode(true);
    cln.id = "pack" + packList.length;
    itm.parentNode.appendChild(cln);
    // Clean Images of Source div
    var imageHolder = cln.querySelector(".items");

    while (imageHolder.children.length > 0) {
        imageHolder.removeChild(imageHolder.children[0]);
    }
     var pack=Pack();
   console.log(cln.id + " package created. We Have " + packList.length + " packages.");
    return false;   
}
function deletePack(e) {
    if (packList.length < 2) return false;
    var main = document.getElementById("main");
    while (e.getElementsByTagName("img").length > 0) {
        main.appendChild(e.getElementsByTagName("img")[0]);
    }
    Pack.items = [];
    e.parentNode.removeChild(e);
    packList.forEach(function(entry) {
        if (entry.visualItem == e.id) {
        packList.pop(entry);
        }
    });
    for (index = 0; index < packList.length; ++index) {
       packList[index].id = "pack" + index;
    }
    document.getElementById("packCount").value = packList.length;   
}
$(document).ready(function() {
    $("#Button1").click(function() {
        var data = new Array();
        $("div .bag div").each(function(index) {
            data[index] = "'" + this.innerHTML + "'";
        });
        $.ajax({
            type: 'POST',
            url: 'packman.aspx/ChangePackaging',
            contentType: "application/json; charset=utf-8",
            data: '{ products:[' + data.join() + ']}',
            dataType: 'json',
            success: function(results) { alert(results.d); },
            error: function() { alert('error'); }
        });
    });
    var pack = Pack();
    debugger;
});

和asp.net代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css"> 
        .package {width:550px;min-height:70px;padding:10px;border:1px solid #aaaaaa; position:relative; margin-top:20px; }
        .package .items { min-height:70px;}
        .package div label {display:inline-block; width:130px;}
        .removeBox { position:absolute; right:-10px; top:-10px; border-radius:10px; width:30px; height:20px; line-height:0; background-color:Red; color:White; font-family:Arial; font-weight:bold; font-size:18px; text-align:center; border:solid 1px #600; }
    </style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/packman.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="main">
                                <label  >
            &nbsp;<img class="item" id="Img1" src="http://dummyimage.com/100x100/000/fff&text=Halil" draggable="true" ondragstart="drag(event)" alt="" />
            <img class="item" id="Img2" src="http://dummyimage.com/100x100/000/fff&text=Figen" draggable="true" ondragstart="drag(event)" alt="" />
            <img class="item" id="Img3" src="http://dummyimage.com/100x100/000/fff&text=Naz" draggable="true" ondragstart="drag(event)" alt="" />
            <img class="item" id="Img4" src="http://dummyimage.com/100x100/000/fff&text=Test" draggable="true" ondragstart="drag(event)" alt="" />
            <img class="item" id="Img5" src="http://dummyimage.com/100x100/000/fff&text=Huni" draggable="true" ondragstart="drag(event)" alt="" />
            <img class="item" id="Img6" src="http://dummyimage.com/100x100/000/red&text=Mavi" draggable="true" ondragstart="drag(event)" alt="" />
            <img class="item" id="Img0" src="http://dummyimage.com/100x100/000/fff&text=Can" draggable="true" ondragstart="drag(event)" alt="" /></label></div>
        <asp:TextBox ID="packCount" runat="server" Text="1"></asp:TextBox>
        <button type="button" onclick="return createPackageClick();">Create Package</button>
        <asp:Button ID="createPackage" runat="server" alt="" text="postBack"/>
        <div id="packages">
            <div class="package" id="pack0">
                <div><label>Gönderecek Depo</label><asp:DropDownList ID="shipFr" runat ="server"></asp:DropDownList>
                    </div>
                <div><label>Teslimat Adresi</label><asp:DropDownList ID="shipTo" runat ="server"></asp:DropDownList></div>
                <button class="removeBox" type="button" onclick="return deletePack(this.parentNode);">x</button>
                <div class="items" ondrop="drop(event)" ondragover="allowDrop(event)"ondragstart="drag(event)"></div>
            </div>
        </div>
        <asp:TextBox ID="TextBox1" runat="server" Text="1"></asp:TextBox>
    </div>
    </form>
</body>
</html>

输入图片描述

无论使用什么代码，您的问题是为什么元素确实获得相同的ID。原因如下:

cln.id = "pack" + packList.length;

"packList"在你发布的代码中没有初始化，所以我们不知道它来自哪里。但是你依赖于ID，它必须在整个页面代码中完全唯一，在"packList"的长度上，并且长度在代码中不会改变。

但是正如一些评论所说，从我们的猜测来看，这似乎不是一个好的代码。也许你想写，你想创造什么，我们可以指导你一个更好的方式:)

我很抱歉地说，但据我所知，你有一些非常神秘(或错误)的代码在那里，我不知道你是否应该从头开始…并提前阅读类、对象和变量作用域。

在你的代码的第一部分，你似乎想要创建一个类"包"，但据我所知，这不是一个有效的方式来写这个。

也

var pkgs = document.getElementById("packages")

没有意义，因为作用域在函数内，并且在这行之后永远不会使用PKGS。

var pack=Pack();

Also make no sense and

createPackageClick()

在任何情况下都返回false，永远不会返回true或某个值。还有一些函数有时只返回值/bool，这在编程中没有意义。

如果你编辑你的问题并准确地写下你想要做的，也许我们中的一个可以给你一些提示，告诉你你需要什么。但是对于这段代码，我认为最好引用Mike C.:

基本上，你的代码是黑暗的，充满错误。

我以为会好起来的，但是没有，对不起。

相关文章：