Question

我正在构建一个表单，用户可以动态地添加或删除行。我已经构建了jQuery函数来实现这一点，但是我在这个过程中丢失了一些元素，我无法弄清楚原因。

HTML代码段

<div class="options" id="options">
        <div class="item1" id="item1">
            <div class="left_wrap">
                <ul>
                    <li class="col_id b-bottom"></li>
                    <li class="hazard_header"><h3>Hazard</h3></li>
                    <li class="hazard_input b-bottom"></li>
                    <li class="con_header b-bottom"><h3>Controls</h3></li>
                    <li class="cat_header"><h3>Consequence Category</h3></li>
                    <li class="cat_options"></li>
                </ul>
            </div>
            <div class="right_wrap">
            </div>
            <div class="controls">
                <div class="addRow" onclick="addRow()"><i class="fa fa-plus"></i>Add Row</div>
                <div class="deleteRow" onclick="deleteRow('#item1')"><i class="fa fa-times"></i> Delete Row</div>
            </div>
        </div><!-- End Item -->
    </div> <!-- End Options Wrap -->

的jQuery

var count = 1;
var wrap;
var item;

function addRow(){
    count++;
    var $newElement = $(item);
        $newElement.find("li.col_id").text(count);
        // Doesn't work
        $newElement.find(".item1").removeClass("item1").addClass("item"+count);
        // Remove ID item1 make it (item+count)
        // Change deleteRow('#item1') to deleteRow('#item2')
        $($newElement).appendTo(".options");

    };

$(document).ready(function(){
    wrap = $(".options").html();
    item = wrap;
    id = $("div.item1");
    id.find("li.col_id").text("1");
});

我已经在addRow中注释了我遇到问题的部分。有线的事情就是当我在里面显示我的（项目）时。它会显示我的wrap（）然而当我在addRow中执行它时它不再显示它。

我已经坚持了几个小时，并尝试了几种不同的方法来做到这一点，但我一直在做空。

当我单击Add Row时，它确实有效，但是我永远无法更改换行的类和ID。

Answer 1

我已更新您的代码。 $ newElement已经是您要使用新ID和Class更新的主要DIV。

var count = 1;
var wrap;
var item;

function addRow(){
    count++;
    var $newElement = $(item);
        $newElement.find("li.col_id").text(count);
        // Remove previous class and Add new Class
        $newElement.attr('class','').addClass("item"+count);
        // Update the ID
        $newElement.attr('id',"item"+count);
        // Update the onlick event with new Item ID
        $newElement.find('.deleteRow').attr('onclick','deleteRow("#'+"item"+count+'")');
        // Remove ID item1 make it (item+count)
        // Change deleteRow('#item1') to deleteRow('#item2')
        $($newElement).appendTo(".options");

    };

$(document).ready(function(){
    wrap = $(".options").html();
    item = wrap;
    id = $("div.item1");
    id.find("li.col_id").text("1");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="options" id="options">
        <div class="item1" id="item1">
            <div class="left_wrap">
                <ul>
                    <li class="col_id b-bottom"></li>
                    <li class="hazard_header"><h3>Hazard</h3></li>
                    <li class="hazard_input b-bottom"></li>
                    <li class="con_header b-bottom"><h3>Controls</h3></li>
                    <li class="cat_header"><h3>Consequence Category</h3></li>
                    <li class="cat_options"></li>
                </ul>
            </div>
            <div class="right_wrap">
            </div>
            <div class="controls">
                <div class="addRow" onclick="addRow()"><i class="fa fa-plus"></i>Add Row</div>
                <div class="deleteRow" onclick="deleteRow('#item1')"><i class="fa fa-times"></i> Delete Row</div>
            </div>
        </div><!-- End Item -->
    </div> <!-- End Options Wrap -->

jQuery失去div换行，+修改元素的问题

1 个答案: