Javascript 如何使用jQuery动态添加递增项？

所以我想做的是添加一些项目，这些项目在单击时会有一个动态组件。我的问题是，我正在谈论的项目是php代码。如下图所示，我的代码不起作用，我不知道如何修复它。如果我只需要添加一个html元素，它就可以工作了，但是这个元素不行。我不擅长jQuery，因此需要帮助

这是我的代码：

<div id="main" style="text-align: center;">
    <input type="button" id="btAdd" value="Add Element" class="bt" />
    <input type="button" id="btRemove" value="Remove Element" class="bt" />
    <input type="button" id="btRemoveAll" value="Remove All" class="bt" /><br />
</div>

这是我的jQuery：

var iCnt = 0;

    var container = $('.equip-ops');

    $('#btAdd').click(function() {
        if (iCnt <= 19) {

            iCnt = iCnt + 1;

            // ADD ITEM.
            $(container).append('<label>Selecteaza Operatiune<select name="eq_1_op_' + iCnt + '"><?php foreach ($operations_' + iCnt + '->fetchAll() as $operation) : ?><option value="<?php echo $operation['oname']; ?>"><?php echo $operation['oname']; ?></option><?php endforeach; ?></select></label>
            ');

            // SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED.
            if (iCnt == 1) {

                var divSubmit = $(document.createElement('div'));
                $(divSubmit).append('<input type=button class="bt" onclick="GetTextValue()"' + 'id=btSubmit value=Submit />');

            }

            // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
            $('#main').after(container, divSubmit);
        }
        // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
        // (20 IS THE LIMIT WE HAVE SET)
        else {      

            $(container).append('<label>Reached the limit</label>'); 
            $('#btAdd').attr('class', 'bt-disable'); 
            $('#btAdd').attr('disabled', 'disabled');

        }
    });

    $('#btRemove').click(function() {   // REMOVE ELEMENTS ONE PER CLICK.
        if (iCnt != 0) { $('#tb' + iCnt).remove(); iCnt = iCnt - 1; }

        if (iCnt == 0) { $(container).empty(); 

            $(container).remove(); 
            $('#btSubmit').remove(); 
            $('#btAdd').removeAttr('disabled'); 
            $('#btAdd').attr('class', 'bt') 

        }
    });

    $('#btRemoveAll').click(function() {    // REMOVE ALL THE ELEMENTS IN THE CONTAINER.

        $(container).empty(); 
        $(container).remove(); 
        $('#btSubmit').remove(); iCnt = 0; 
        $('#btAdd').removeAttr('disabled'); 
        $('#btAdd').attr('class', 'bt');

    });
});

---

好的，这段代码有一些关键问题，这些问题完全是错误的

如果此代码位于PHP文件的内部， 然后它可能会工作，将PHP和JS混合在一起。如果它在里面 对于.js文件，它永远不会工作。JS是一种前端语言 PHP是后端语言。 阅读并了解：$.ajax和$.getJSON。这就是让PHP和JS协同工作的方法。 如果您生成了一个模板，那么使用PHP来处理您的问题是可以的，但对于JS则不可以。将select options数据作为数组注入，让JS将其解析为HTML，然后.append。 底部的所有移除和清空都是多余的。如果您希望从main中删除所有内容，那么只需：$'main'.empty； 我现在就不谈了

以下是一些资源，从哪里开始：

---

了解PHP和JS/jQuery是如何工作的，不是吗。PHP总是在加载JS/jQuery之前加载和执行，您应该研究AJAX。是的，我可以给您一些快速提示。如果您的jQuery代码看起来太大，您可能已经知道有问题了。同样在JS中，不能对字符串进行换行。因此，第12行您已经导致了一个严重错误，脚本被终止。下载BugZilla或使用内置控制台查看实际情况。同时谷歌what console.log'I'm a message'；是的。@Epodax我可没这么想。所以我需要试试ajax，你说。好吧，我会试一试。@KalleH.Värava由于代码运行良好，输入中只有html，我对php有问题，我想可能是Epodax所说的php是服务器端，而JS/jQuery是客户端。这意味着php将在加载js/jQuery之前计算并执行其代码。php完成后，js/jQuery部分将能够执行。这意味着您不能像这样将Js/jQuery值加载到php中。实现这一点的一种方法是使用AJAX。我真的，老实说，我试着根据上面的内容编写一些代码。但在不恰当的编程中，问题更为普遍。所以我的答案，对你的特定代码没有直接的帮助。但可能会引导您解决更大的问题。我决定放弃这段代码，尝试使用AJAX。为我辩护，我仍然是编程领域的初学者，我做过这样的事情，因为我当时认为这是可以做到的。现在我知道了better@Kaladan你不必为自己辩护。这是显而易见的。可悲的是，在这个地方，你会受到打击，永远不会少。我在答案中添加了一些资源链接。一开始它们可能看起来很复杂，但要研究它们。此外，谷歌还提供了一些简单的示例，用最少的代码来真正展示核心功能，这些功能实际上完成了这项工作。但最好的办法是找到一些简单但好的脚本，在那里学习所有的基础知识。请务必查看以下网站：tizag.com、w3schools.com。