Question

我有一个表单，来自上一页的用户输入和按钮，允许用户定义他们想要分配给设备的“属性”的数量。

该页面要求用户为每个属性定义名称和类型。如果用户从选择列表中选择“选择选项列表”，则会通过jquery附加“add”显示一个按钮，该按钮应允许用户添加文本输入以添加选项。然而，使用最接近的，下一个和兄弟姐妹的操作不会起作用。它可以不使用任何这些，但它会为页面上“option”类的每个实例分配一个文本输入。

由于某种原因，代码在小提琴中无法正常工作，所以我只需要复制并粘贴整个页面代码。

<!-- Declare num variable from form on previous page -->
<?php echo "<script> var num=\"".$_POST['number-of-attributes']."\";</script>"; <script type="text/javascript>
//variable to count the number of attributes
count=0;
//Convert Php post to an int
num=parseInt(num, 10);
//This method inserts the number of attributes present in the param
function addAttribute (input) {

    for(var i=0; i<input; i++) {

        var template="<div class=\"new-attribute\">"
                 + "<h3>New Attribute</h3>"
                 + "<label for=\"attributeName"+count+"\">Name:</label>"
                 + "<input class=\"attribute\" type=\"text\" name=\"attributeName"+count+"\">"
                 + "<label for=\"attributeType"+count+"\">Type:</label>"
                 + "<select class=\"tattribute\" name=\"attributeType"+count+"\">"
                 + "<option value=\"text\" selected>Text</option>"
                 + "<option value=\"checkbox\">Checkbox</option>"
                 + "<option value=\"select-list\">Select Option List</option>"
                 + "<option value=\"notes\">Notes</option>"
                 + "</select>"
                 + "<div class=\"option\"></div>"
                 + "<div class=\"remove\">Delete</div>"
                 + "</div>";
            $(template).appendTo('#attributes');
            count++;
            $("input[id=count-field]").val(count);

    }           

}
//JQuery does its stuff
    $(document).ready(function() {


        //Add the required number of attributes
        if(num!=null) {

            addAttribute(num);

        }

        //Add one attribute on click
        $("#new").on('click', function() {

            addAttribute(1);
            //Remove current of clicked 
            $(".remove").on('click', function() {

                $(this).closest('.new-attribute').remove();

            });

        });

//Remove current of added
        $(".remove").on('click', function() {

            $(this).closest('.new-attribute').remove();

        });

        //select temp
        var select="<div id=\"new-option\">"
                 + "<div class=\"btn\">add</div>";   
                 + "</div>";
        var add= "<label for=\"attributeOption"+count+"\">Name:</label>"
                 + "<input class=\"attribute\" type=\"text\" name=\"attributeOption"+count+"\">";        
        //get value of select
        $('.tattribute').change(function() {

           //Add extra fields for select
            if (this.value == "select-list") {

                $(this).next('.option').append(select);
                $(".btn").on('click', function() {

                    $(this).next('.option').append(add);

                });


            }   
            //Remove extra fields if not a select
            else {

                    $(this).next('.option').empty();

            }

        });

    });

#new {
    width: 150px;
    height: 50px;
    background: blue;
    cursor: pointer;
}

.remove {
    width: 50px;
    height: 50px;
    display: block;
    background: red;
    cursor: pointer;
}

.btn {
    width: 100px;
    height: 20px;
    display: block;
    background: green;
    padding: 5px;
    cursor: pointer;
}

<form id="form" name="new-user" action="update.php" method="post">

    <label for="device-name">Name of Device Type:</label>
    <?php echo $_POST['device-name']; ?>


    <div id="new">New Attribute</div>

    <div id="attributes">

    </div>

    <input id="count-field" class="hidden-field" type="hidden" name="total" value="">
    <input class="hidden-field" type="hidden" name="device-name" value="<?php echo $_POST['device-name']; ?>">

    <input class="submit-button" type="Submit" value="Submit">

</form>

Answer 1

要回答您的问题，那么一次无效的通话就是当您尝试从next(.option)找到.btn时，因为.btn不是.option的兄弟1}}。

现在，您也遇到了一些事件委托问题，您的jQuery代码可以像这样进行优化：

//JQuery does its stuff
$(document).ready(function () {
    //Add the required number of attributes
    if (num != null) {
        addAttribute(num);
    }

    //Add one attribute on click
    $("#new").on('click', function () {
        addAttribute(1);
    });

    //Remove action
    $("#attributes").on('click', '.remove', function () {
        $(this).closest('.new-attribute').remove();
    });

    //select temp
    var select = "<div id=\"new-option\">" + "<button type=\"button\" class=\"btn\">add</button>"; + "</div>";
    var add = "<label for=\"attributeOption" + count + "\">Name:</label>" + "<input class=\"attribute\" type=\"text\" name=\"attributeOption" + count + "\">";

    //Select change action
    $('#attributes').on('change', '.tattribute', function () {
        //Add extra fields for select
        if (this.value == "select-list") {
            $(this).next('.option').append(select);
        }
        //Remove extra fields if not a select
        else {
            $(this).next('.option').empty();
        }
    });
    //Add action
    $("#attributes").on('click', '.btn', function () {
        $(this).before(add); //adjust this since I don't know exactly where you want to insert the new inputs
    });
});

选中 demo fiddle

请注意，我为新的，添加和删除按钮使用了正确的<button>标记而不是div。

最近的，接下来，兄弟姐妹不会工作。动态表单构建

1 个答案: