Question

使用jQuery我有一个带有LI的UL，其中有一个基于slideToggle显示的div。 LI中的div有一个子div对象数组，每个对象都有一些标签和输入。我需要添加更多孩子并编辑新孩子的内容。这最终将与车把模板集成。

附带的示例代码完成了所有必需的操作，为了简单起见，我将其删除了，但我相信必须有一种更有效的方法来执行此操作。任何建议都将不胜感激。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Session Template</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
            crossorigin="anonymous"></script>
     <script>
         $(document).ready(function () {
                $(this).on('click', '.addApp', function (e) {
                    $(this).parent().parent().parent().siblings('.notesDiv').slideToggle(500);
                });
                $(this).on('click', '.addBtn', function (e) {
                //    var newval = ($('.setNum').length + 1);
                //    var newInputID = 'snumber' + newval;
                //    $('.beforeme').prepend('<div class="data"<input class=setNum id="' + newInputID + '"/></div>');
                //    alert($(this).parent().children().length - 2);
                    var div = $(this).closest('.cntTest').find(".data")[0];
                    console.log(div)
                    $(this).parent().children('.data:last').clone().insertBefore($(this).parent().children('.beforeme'));
                    $(this).parent().children('.data:last').children('label').html($(this).parent().children().length - 2);
                });
            });
    </script>
    <style>
        .titleText{float:left;font-weight:bold;margin-left:10px;}
        .titleBtnAdd{float:right;margin-right:5px;}
        .data{width:25px;border:1px solid black;text-align:center;height:20px;}
        .setNum{width:21px;text-align:center;}
    </style>
</head>
<body style="width:400px;">
    <div id="sessContainer" style="border:1px solid red;padding:2px;">
        <div class="titleDiv" style="border:1px solid blue;display:block; height:50px;">
            <p><span class="titleText">this is some title text</span><span class="titleBtnAdd"><img class="addApp" src="info-red.gif" /></span></p>
        </div>
        <br />
        <div class="notesDiv" style="background-color:cornsilk;border:1px solid green; display:none; height:100px;margin:2px;">
            <span class="notesText">This is the representation of notes that will be displayed in the notes div and will show
                and hide based on the titleBtnAdd click on the siblings div.  TSo is the green border.</span>
        </div>
    </div>
    <p></p>
    <div class="cntTest">
        <div class="addBtn" style="background-color:wheat">Event1: Add participants</div>
        <div class="data"><label class="setNum">1</label></div>
        <div class="data"><label class="setNum">2</label></div>
        <div class="data"><label class="setNum">3</label></div>
        <div class="beforeme">this is a description of Event1</div>
    </div>
    <div class="cntTest">
        <div class="addBtn" style="background-color:wheat">Event2: Add participants</div>
        <div class="data"><label class="setNum">1</label></div>
        <div class="data"><label class="setNum">2</label></div>
        <div class="data"><label class="setNum">3</label></div>
        <div class="data"><label class="setNum">4</label></div>
        <div class="beforeme">this is a description of Event2</div>
</div>
</body>
</html>

Answer 1

简化代码可以是：

var div = $(this).closest('.cntTest').find(".data:last");
div.clone().find("label").text((i,txt) => +txt + 1).closest('.data').insertAfter(div);

步骤：

获取最后一个数据div
克隆
更改标签text()
得父母
在

＆＃13;

$(document).on('click', '.addApp', function (e) {
    $(this).closest('.titleDiv').siblings('.notesDiv').slideToggle(500);
});
$(document).on('click', '.addBtn', function (e) {
    var div = $(this).closest('.cntTest').find(".data:last");
    div.clone().find("label").text((i, txt) => +txt + 1).
                   closest('.data').insertAfter(div);
});

＆＃13;

.titleText {
  float: left;
  font-weight: bold;
  margin-left: 10px;
}
.titleBtnAdd {
  float: right;
  margin-right: 5px;
}
.data {
  width: 25px;
  border: 1px solid black;
  text-align: center;
  height: 20px;
}
.setNum {
  width: 21px;
  text-align: center;
}
body {
  width: 400px;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>


<div id="sessContainer" style="border:1px solid red;padding:2px;">
    <div class="titleDiv" style="border:1px solid blue;display:block; height:50px;">
        <p><span class="titleText">this is some title text</span><span class="titleBtnAdd"><img class="addApp"
                                                                                                src="https://dummyimage.com/50x50/e9f4f5/d90909"/></span>
        </p>
    </div>
    <br/>

    <div class="notesDiv"
         style="background-color:cornsilk;border:1px solid green; display:none; height:100px;margin:2px;">
            <span class="notesText">This is the representation of notes that will be displayed in the notes div and will show
                and hide based on the titleBtnAdd click on the siblings div.  TSo is the green border.</span>
    </div>
</div>
<p></p>

<div class="cntTest">
    <div class="addBtn" style="background-color:wheat">Event1: Add participants</div>
    <div class="data"><label class="setNum">1</label></div>
    <div class="data"><label class="setNum">2</label></div>
    <div class="data"><label class="setNum">3</label></div>
    <div class="beforeme">this is a description of Event1</div>
</div>
<div class="cntTest">
    <div class="addBtn" style="background-color:wheat">Event2: Add participants</div>
    <div class="data"><label class="setNum">1</label></div>
    <div class="data"><label class="setNum">2</label></div>
    <div class="data"><label class="setNum">3</label></div>
    <div class="data"><label class="setNum">4</label></div>
    <div class="beforeme">this is a description of Event2</div>
</div>

＆＃13;

使用jQuery并克隆带有嵌入标签的子项并更改标签内容

1 个答案: