javascript - jQuery:使用动态生成变量作为选择器将 JSON 输入附加为内容

Question

我在一个网站上工作，该网站基本上是按类别分隔的项目列表。用户可以添加一个类别，在下面的表格中输入名称:

    <form onsubmit="append_div(); add_cat(); return false;"> 
        <input id="new_category"/>
        <input type="submit" value="Add" id="add_btn_category" />
    </form>

调用了两个函数，append_div()，它动态地创建一个新的子项，新类别将被插入，add_cat()，它从服务器并应在指示的选择器中设置新内容。

    function append_div(){
            var nodelist = document.getElementsByTagName("h3").length; 
            var node = document.createElement("h3");
            node.id = "new_space" + nodelist;
            var new_sp = "'#new_space" + nodelist + "'"; // to be used in selector
            node.className= "categories";
            document.getElementById("append").appendChild(node);
        }

    function add_cat() {
            var url = 'add_category.php?category=' + $('#new_category').val();
            $.getJSON(url, function(data) {
                $(new_sp).html(data[0].category);
            });
        }

除 $(new_sp).html(data[0].category); 外，一切正常。这是生成的代码，分为三个不同的类别:aa、bb 和 cc。

    `<div id="append">
        <h3 id="new_space0" class="categories"></h3>
        <h3 id="new_space1" class="categories"></h3>
        <h3 id="new_space2" class="categories"></h3>
    </div>`

但应该是:

        `<div id="append">
            <h3 id="new_space0" class="categories">aa</h3>
            <h3 id="new_space1" class="categories">bb</h3>
            <h3 id="new_space2" class="categories">cc</h3>
        </div>`

在$(new_sp).html(data[0].category);中使用变量new_sp作为选择器似乎不行，但是检查后有类似问题的帖子并尝试了许多我无法解决的建议解决方案。有什么想法吗？

Answer 1

var new_sp = "'#new_space" + nodelist + "'"; // to be used in selector

应该是

var new_sp = "#" + node.id; // to be used in selector

和变量new_sp应该在函数外定义 append_div或者它应该是 global在函数中访问 add_cat

有点像

   var new_sp = "";
   function append_div(){
            var nodelist = document.getElementsByTagName("h3").length; 
            var node = document.createElement("h3");
            node.id = "new_space" + nodelist;
            new_sp = "#" + node.id; // to be used in selector
            node.className= "categories";
            document.getElementById("append").appendChild(node);
        }

    function add_cat() {
            var url = 'add_category.php?category=' + $('#new_category').val();
            $.getJSON(url, function(data) {
                $(new_sp).html(data[0].category);
            });
        }