选择子div的文本

时间:2017-08-11 15:29:52

标签: javascript jquery jquery-selectors this

我有以下情况,如下图所示

  1. 我使用文字'task1'
  2. 编辑了任务
  3. 将文字更改为“task2”
  4. 屏幕上出现新文字“task2”。
  5. 但是我在编辑文本时遇到问题并将其存储在变量中。

    如何使用jquery从div id =“taskDiv”的子div中选择文本(在本例中为task2)?

    task workflow

    代码javascript:

    $(".list_of_items").on("click", "button.edit", function (){
            event.preventDefault();
            var myText = $(this).closest("div.text_holder").text();
            var textBox = "<div id='taskDiv'><form class='edit_input_box'><input type='text' value='" + myText + "' class='itembox'></form></div>";
            var deleteButton = "<button class='delete btn btn-danger btn-sm'><span class='glyphicon glyphicon-trash'></span></button>";
            var editButton = "<button class='edit btn btn-success btn-sm'><span class='glyphicon glyphicon-pencil'></span></button>";
            var twoButtons = "<div class='btn-group'>" + deleteButton + editButton + "</div>";
    
            var textToSend = $(this).closest("div.text_holder").replaceWith(textBox); //replace with new word written 
    
            $("form.edit_input_box").on("submit", function(){
                var checkBox = "<label><input type='checkbox'></label>";
                //var noteId = $(this).closest("li").attr("id"); //take unique note id
                //sendUpdatedNoteToDb(noteId,textToSend);
                $(this).replaceWith("<div>" + $(".itembox").val() + twoButtons + "</div>");
            }); 
    

    代码html:

    <div class="form-inline">
                    <h1>Learning jquery</h1>
                    <form role="form" id="main_input_box_dub2az">
                        <label> <input type="text" class="form-control"
                            id="txtField_dub2az" name="Item" placeholder="Site note:"
                            aria-describedby="name-format" required> <input
                            type="submit" value="Add" id=btnAdd_dub2az
                            class="btn btn-primary add_button">
                        </label>
                    </form>
                    <div>
                        <ol class="list-group list_of_items" id="dub2az"></ol>
                    </div>
                    <div class="container">
                        <div id="container" class=".col-xs-6 .col-sm-4"></div>
                    </div>
                </div>
    

0 个答案:

没有答案