使用Diffrent按钮值克隆Div

时间:2019-07-14 22:20:44

标签: jquery

我有这个div

<div id="accordion" class="clone_div">
        <div class="card w-75">
            <div class="card-header" id="headingOne">
                <h5 class="mb-0">
                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <div class="row">
                            <div class="col-sm text-right">
                                <span>הרשמה</span>
                            </div>

                            <div class="col-sm">
                                <span>ש"ח 000</span>
                            </div>
                        </div>
                    </button>
                </h5>
            </div>

            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                <div class="card-body">
                    <form method="post" id="check_std" novalidate="novalidate">
                        <div class="row">
                            <div class="col-sm ">
                                <input type="number" class="form-control" value="<?= $p_id ?>" name="p_id" placeholder="מספר ת.ז. *">
                            </div>
                            <div class="col-sm ">
                                <input type="date" class="datepicker form-control" value="<?= $b_day ?>" name="b_day" placeholder="תאריך לידה*">
                            </div>

                        </div>
                        <input type="hidden" name="search" value="search">
                    </form>

                    <div class="row mt-5 mr-1">
                        <form id="std_val" method="post" novalidate="novalidate" style="text-align: right">
                            <span class="mr-3">רישום <input type="radio" class="checkbox gn" name="gender" value="boy"> בן <input type="radio" name="gender" class="checkbox gn" value="girl"> בת </span>
                            <div class="row col-md-12">
                                <div class="col-sm">
                                    <input type="text" class="form-control  " value="<?= $row['std_name'] ?>"  placeholder="שם*">
                                </div>
                                <div class="col-sm">
                                    <input type="text" class="form-control " value="" aria-describedby="emailHelp" placeholder="שם משפחה*">
                                </div>
                            </div>
                            <div class="row col-md-12 mt-2 ">
                                <div class="col-sm">

                                    <select class="form-control ">
                                        <option selected disabled>מוסד הלימודים*</option>
                                        <option value="אהלי תורה" >אהלי תורה </option>
                                        <option value="תלמוד תורה" >תלמוד תורה </option>
                                        <option value="בית רבקה צעירות" >בית רבקה צעירות </option>
                                        <option value="בית רבקה בוגרות" >בית רבקה בוגרות </option>
                                        <option value="גן" >גן </option>
                                        <option value="אחר" >אחר </option>

                                    </select>

                                </div>
                                <div class="col-sm">
                                    <select class="form-control">
                                        <option selected disabled>שם המורה/הגננת*</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row col-md-12 mt-2 ">
                                <div class="col-sm">
                                    <select class="form-control ">
                                        <option selected disabled>מידת חולצה*</option>
                                    </select>
                                </div>
                                <div class="col-sm">
                                    <select class="form-control">
                                        <option selected disabled> מסיימת כיתה/גן*</option>
                                        <option value="גן ראשון">גן ראשון</option>
                                        <option value="גן תת חובה">גן תת חובה</option>
                                        <option value="גן חובה">גן חובה</option>
                                        <option value="כיתה א">כיתה א</option>
                                        <option value="כיתה ב">כיתה ב</option>
                                        <option value="כיתה ג">כיתה ג</option>
                                        <option value="כיתה ג">כיתה ג</option>
                                        <option value="כיתה ד">כיתה ד</option>
                                        <option value="כיתה ה">כיתה ה</option>
                                        <option value="כיתה ו">כיתה ו</option>
                                        <option value="כיתה ז">כיתה ז</option>
                                        <option value="כיתה ח">כיתה ח</option>
                                        <option value="כיתה ט">כיתה ט</option>
                                        <option value="כיתה י">כיתה י</option>
                                        <option value="כיתה יא">כיתה יא</option>
                                        <option value="כיתה יב">כיתה יב</option>

                                    </select>
                                </div>
                            </div>
                            <div class="row col-md-7 mt-2 " style="width: 313px">
                                <div class="col-sm">
                                    <select class="form-control  ">
                                        <option selected disabled> סוג קייטנה*</option>
                                        <option value="קייטנת ילדי הגנים" data-price = "280">קייטנת ילדי הגנים</option>
                                        <option value="קעמפ (מסיימות ה- ח)" data-price = "350">קעמפ (מסיימות ה- ח)</option>
                                        <option value="קעמפ (מסיימות א- ד)" data-price = "280">קעמפ (מסיימות א- ד)</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row col-md-7 mt-2 " style="width: 313px">
                                <div class="col-sm">
                                    <select class="form-control  boy" style="display: none">
                                        <option selected disabled>  מידת כיפה*</option>

                                    </select>
                                </div>
                            </div>
                            <div class="row col-md-12 mt-lg-5 ">
                                <div class="col-sm">
                                    <input type="checkbox" value="health"> הצהרת בריאות
                                </div>
                            </div>
                            <hr>
                            <div class="row col-md-12">
                                <div class="col-lg-12 mb-3">
                                    <h4>פרטי האב</h4>
                                </div>
                                <div class="col-sm">
                                    <input type="text" class="form-control  " value="<?= $row['std_f_name'] ?>"  placeholder="שם האב*">
                                </div>
                                <div class="col-sm">
                                    <input type="text" class="form-control " value="" placeholder="ת.ז. האב*">
                                </div>
                            </div>
                            <div class="row col-md-12 mt-2">

                                <div class="col-sm">
                                    <input type="email" class="form-control  " value=""  placeholder="מייל האב*">
                                </div>
                                <div class="col-sm">
                                    <input type="text" class="form-control " value="<?= $row['std_f_phone'] ?>" placeholder="נייד האב*">
                                </div>
                            </div>
                            <div class="row col-md-12 mt-3">
                                <div class="col-lg-12 mb-3">
                                    <h4>פרטי האם</h4>
                                </div>
                                <div class="col-sm">
                                    <input type="text" class="form-control  " value="<?= $row['std_m_name'] ?>"  placeholder="שם האב*">
                                </div>
                                <div class="col-sm">
                                    <input type="text" class="form-control " value="" placeholder="ת.ז. האם*">
                                </div>
                            </div>
                            <div class="row col-md-12 mt-2">
                                <div class="col-sm">
                                    <input type="email" class="form-control  " value=""  placeholder="מייל האם*">
                                </div>
                                <div class="col-sm">
                                    <input type="text" class="form-control " value="<?= $row['std_m_phone'] ?>" placeholder="נייד האם*">
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

此div是折叠。 我想做的是在克隆它时,按钮data-target的名称将为data-target =“#collapseOne1”,依此类推 且id为id =“ collapseOne”的div将与按钮data-target的值相同 到目前为止,我的部落是

       $("#clone").click(function(){

            $('.clone_div')
                .clone()
                .attr('id', 'collapseOne'+ cloneCount++)
                .attr('data-target', '#collapseOne'+ cloneCount++)
                .attr('class', 'clone_div'+ cloneCount++)
                .appendTo(".result");

        });
但我没有得到正确的结果

1 个答案:

答案 0 :(得分:0)

我认为这就是你所追求的。您需要在克隆中找到要更改其属性的每个对象。

    var cloneCount = 1

      $("#clone").click(function() {

                cloneCount++
        var clone = $('.clone_div')
          .clone();

                clone.attr('class', 'clone_div'+ cloneCount)
                clone.find("#collapseOne").attr("id","collapseOne" + cloneCount);
                clone.find("button").attr("data-target","#collapseOne" + cloneCount);
                clone.appendTo(".result");

  });