堆栈内存溢出
  简体   繁体   English

我如何编辑Li项目以使用javascript向其添加文本

[英]How can i edit the Li item to add text to it with javascript

 原文  2019-08-30 09:03:09  2   1    javascript

问题描述

I am creating a trello like web app for practising so i have completed the cards with drag drop features but i want now to add content to the li items of an ul tag that can even be edited by user too 我正在创建一个类似trello的网络应用进行练习，所以我已经完成了具有拖放功能的卡片，但是现在我想向ul标签的li项添加内容，甚至用户也可以对其进行编辑

I want it to be in javascript 我希望它在javascript中

HTML COde HTML代码 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Trello</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/css/style.css" rel="stylesheet">
</head>

<body>
    <!-- Masthead -->
    <header class="masthead">
        <div class="boards-menu">
            <div class="board-search">
                <input type="search" class="board-search-input" aria-label="Board Search">
                <i class="fas fa-search search-icon" aria-hidden="true"></i>
            </div>
        </div>
        <div class="logo">
            <h1><i class="fab fa-trello logo-icon" aria-hidden="true"></i>Trello</h1>
        </div>
        <div class="user-settings" style="height: 20px;margin-bottom:35px;">
            <a href="profile.html">
                <img src="https://img.icons8.com/wired/64/000000/settings.png">
            </a>
        </div>
    </header>
    <!-- Lists container -->
    <section class="lists-container">
        <div class="list" id="dragabble_card">
            <h3 class="list-title">Tasks to Do</h3>
            <ul class="list-items" id="parent">
                <li id="repeatTHIS"> </li>
            </ul>
            <button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
        </div>
        <div class="list" id="dragabble_card1">
            <h3 class="list-title">Completed Tasks</h3>
            <ul class="list-items" id="parent">
                <li id="repeatTHIS"> </li>
            </ul>
            <button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
        </div>
        <div class="list" id="dragabble_card">
            <h3 class="list-title">Tasks to Do</h3>
            <ul class="list-items" id="parent">
                <li id="repeatTHIS"> </li>
            </ul>
            <button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
        </div>
        <button class="add-list-btn btn">Add a list</button>
    </section>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="script/script.js">

    </script>
</body>

</html>

Javascript 使用Javascript 

$(function () {
    $("#parent, #parent1").sortable({
        connectWith: ".list-items"
    }).disableSelection();
});


document.getElementById('button').onclick = repeat;

var i = 0;
var original = document.getElementById('repeatTHIS');


function repeat() {
    var clone = original.cloneNode(true);
    clone.id = "repeatTHIS" + ++i;
    original.parentNode.appendChild(clone);
}

my css as follows 我的CSS如下 

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
}

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font: inherit;
    background: none;
    border: none;
    color: inherit;
    padding: 0;
    cursor: pointer;
}

:focus {
    outline-color: #fa0;
}

:root {
    font-size: 11px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Masthead */

.masthead {
    flex-basis: 4rem;
    display: flex;
    align-items: center;
    padding: 0 0.8rem;
    margin: -8px -8px 0 -8px;
    background-color: #0067a3;
    box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1);
}

.masthead .btn {
    background-color: #4c94be;
    border-radius: 0.3rem;
    transition: background-color 150ms;
}

.masthead .btn:hover {
    background-color: #3385b5;
}

.boards-menu {
    display: flex;
    flex-shrink: 0;
}

.boards-btn {
    flex-basis: 9rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin-right: 0.8rem;
    padding: 0.6rem 0.8rem;
}

.boards-btn-icon {
    font-size: 1.7rem;
    padding-right: 1.2rem;
}

.board-search {
    flex-basis: 18rem;
    position: relative;
}

.board-search-input {
    height: 3rem;
    border: none;
    border-radius: 0.3rem;
    background-color: #4c94be;
    width: 100%;
    padding: 0 3rem 0 1rem;
    color: #fff;
}

.board-search-input:hover {
    background-color: #66a4c8;
}

.search-icon {
    font-size: 1.5rem;
    position: absolute;
    top: 50%;
    right: 0.8rem;
    transform: translateY(-50%) rotate(90deg);
    color: #fff;
}

.logo {
    flex: 1;
    font-family: "Courgette", cursive;
    font-size: 2.2rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 2rem;
    transition: color 150ms;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}

.logo:hover {
    color: rgba(255, 255, 255, 0.8);
}

.logo-icon {
    padding-right: 0.4rem;
}

.user-settings {
    display: flex;
    height: 1.5rem;
    color: #fff;
}


.user-settings-btn {
    font-size: 1.5rem;
    width: 3.5rem;
    margin-right: 1.5rem;
}


/* Board info bar */

.board-info-bar {
    flex-basis: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.8rem 0;
    padding: 0 1rem;
    color: #f6f6f6;
}

sboard-info-bar .btn {
    font-size: 1.4rem;
    font-weight: 400;
    transition: background-color 150ms;
    padding: 0 0.6rem;
    border-radius: 0.3rem;
    height: 3rem;
}

.board-info-bar .btn:hover {
    background-color: #006aa8;
}

.private-btn-icon,
.menu-btn-icon {
    padding-right: 0.6rem;
    white-space: nowrap;
}

.board-title h2 {
    font-size: 1.8rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Lists */

.lists-container::-webkit-scrollbar {
    height: 2.4rem;
}

.lists-container::-webkit-scrollbar-thumb {
    background-color: #66a3c7;
    border: 0.8rem solid #0079bf;
    border-top-width: 0;
}

.lists-container {
    display: flex;
    align-items: start;
    padding: 0 0.8rem 0.8rem;
    overflow-x: auto;
    height: calc(100vh - 8.6rem);
    margin-top: 60px;
}

.list {
    flex: 0 0 27rem;
    display: flex;
    flex-direction: column;
    background-color: #e2e4e6;
    max-height: calc(100vh - 11.8rem);
    border-radius: 0.3rem;
    margin-right: 1rem;
}

.list:last-of-type {
    margin-right: 0;
}

.list-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #333;
    padding: 1rem;
}

.list-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-content: start;
    padding: 0 0.6rem 0.5rem;
    overflow-y: auto;
}

.list-items::-webkit-scrollbar {
    width: 1.6rem;
}

.list-items::-webkit-scrollbar-thumb {
    background-color: #c4c9cc;
    border-right: 0.6rem solid #e2e4e6;
}

.list-items li {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.3;
    background-color: #fff;
    padding: 0.65rem 0.6rem;
    color: #4d4d4d;
    border-bottom: 0.1rem solid #ccc;
    border-radius: 0.3rem;
    margin-bottom: 0.6rem;
    word-wrap: break-word;
    cursor: pointer;
}

.list-items li:last-of-type {
    margin-bottom: 0;
}

.list-items li:hover {
    background-color: #eee;
}

.add-card-btn {
    display: block;
    font-size: 1.4rem;
    font-weight: 400;
    color: #838c91;
    padding: 1rem;
    text-align: left;
    cursor: pointer;
}

.add-card-btn:hover {
    background-color: #cdd2d4;
    color: #4d4d4d;
    text-decoration: underline;
}


.add-list-btn {
    flex: 0 0 27rem;
    display: block;
    font-size: 1.4rem;
    font-weight: 400;
    background-color: #006aa7;
    color: #a5cae0;
    padding: 1rem;
    border-radius: 0.3rem;
    cursor: pointer;
    transition: background-color 150ms;
    text-align: left;
    margin-left: 15px;
}

.add-list-btn:hover {
    background-color: #005485;
}

.add-card-btn::after,
.add-list-btn::after {
    content: '...';
}


  
 
  
  
  
 
   
 
    
    $(function () {
        $("#parent, #parent1").sortable({
            connectWith: ".list-items"
        }).disableSelection();
    });


    document.getElementById('button').onclick = repeat;

    var i = 0;
    var original = document.getElementById('repeatTHIS');


    function repeat() {
        var clone = original.cloneNode(true);
        clone.id = "repeatTHIS" + ++i;
        original.parentNode.appendChild(clone);
    }
 
    
    body {
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
    }

    .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        font: inherit;
        background: none;
        border: none;
        color: inherit;
        padding: 0;
        cursor: pointer;
    }

    :focus {
        outline-color: #fa0;
    }

    :root {
        font-size: 11px;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* Masthead */

    .masthead {
        flex-basis: 4rem;
        display: flex;
        align-items: center;
        padding: 0 0.8rem;
        margin: -8px -8px 0 -8px;
        background-color: #0067a3;
        box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1);
    }

    .masthead .btn {
        background-color: #4c94be;
        border-radius: 0.3rem;
        transition: background-color 150ms;
    }

    .masthead .btn:hover {
        background-color: #3385b5;
    }

    .boards-menu {
        display: flex;
        flex-shrink: 0;
    }

    .boards-btn {
        flex-basis: 9rem;
        font-size: 1.4rem;
        font-weight: 700;
        color: #fff;
        margin-right: 0.8rem;
        padding: 0.6rem 0.8rem;
    }

    .boards-btn-icon {
        font-size: 1.7rem;
        padding-right: 1.2rem;
    }

    .board-search {
        flex-basis: 18rem;
        position: relative;
    }

    .board-search-input {
        height: 3rem;
        border: none;
        border-radius: 0.3rem;
        background-color: #4c94be;
        width: 100%;
        padding: 0 3rem 0 1rem;
        color: #fff;
    }

    .board-search-input:hover {
        background-color: #66a4c8;
    }

    .search-icon {
        font-size: 1.5rem;
        position: absolute;
        top: 50%;
        right: 0.8rem;
        transform: translateY(-50%) rotate(90deg);
        color: #fff;
    }

    .logo {
        flex: 1;
        font-family: "Courgette", cursive;
        font-size: 2.2rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.5);
        margin: 0 2rem;
        transition: color 150ms;
        text-align: center;
        white-space: nowrap;
        cursor: pointer;
    }

    .logo:hover {
        color: rgba(255, 255, 255, 0.8);
    }

    .logo-icon {
        padding-right: 0.4rem;
    }

    .user-settings {
        display: flex;
        height: 1.5rem;
        color: #fff;
    }


    .user-settings-btn {<!DOCTYPE html>
<html lang="en">

<head>
    <title>Trello</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/css/style.css" rel="stylesheet">
</head>

<body>
    <!-- Masthead -->
    <header class="masthead">
        <div class="boards-menu">
            <div class="board-search">
                <input type="search" class="board-search-input" aria-label="Board Search">
                <i class="fas fa-search search-icon" aria-hidden="true"></i>
            </div>
        </div>
        <div class="logo">
            <h1><i class="fab fa-trello logo-icon" aria-hidden="true"></i>Trello</h1>
        </div>
        <div class="user-settings" style="height: 20px;margin-bottom:35px;">
            <a href="profile.html">
                <img src="https://img.icons8.com/wired/64/000000/settings.png">
            </a>
        </div>
    </header>
    <!-- Lists container -->
    <section class="lists-container">
        <div class="list" id="dragabble_card">
            <h3 class="list-title">Tasks to Do</h3>
            <ul class="list-items" id="parent">
                <li id="repeatTHIS"> </li>
            </ul>
            <button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
        </div>
        <div class="list" id="dragabble_card1">
            <h3 class="list-title">Completed Tasks</h3>
            <ul class="list-items" id="parent">
                <li id="repeatTHIS"> </li>
            </ul>
            <button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
        </div>
        <div class="list" id="dragabble_card">
            <h3 class="list-title">Tasks to Do</h3>
            <ul class="list-items" id="parent">
                <li id="repeatTHIS"> </li>
            </ul>
            <button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
        </div>
        <button class="add-list-btn btn">Add a list</button>
    </section>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="script/script.js">

    </script>
</body>

</html>
        font-size: 1.5rem;
        width: 3.5rem;
        margin-right: 1.5rem;
    }


    /* Board info bar */

    .board-info-bar {
        flex-basis: 3rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0.8rem 0;
        padding: 0 1rem;
        color: #f6f6f6;
    }

    sboard-info-bar .btn {
        font-size: 1.4rem;
        font-weight: 400;
        transition: background-color 150ms;
        padding: 0 0.6rem;
        border-radius: 0.3rem;
        height: 3rem;
    }

    .board-info-bar .btn:hover {
        background-color: #006aa8;
    }

    .private-btn-icon,
    .menu-btn-icon {
        padding-right: 0.6rem;
        white-space: nowrap;
    }

    .board-title h2 {
        font-size: 1.8rem;
        font-weight: 700;
        white-space: nowrap;
    }

    /* Lists */

    .lists-container::-webkit-scrollbar {
        height: 2.4rem;
    }

    .lists-container::-webkit-scrollbar-thumb {
        background-color: #66a3c7;
        border: 0.8rem solid #0079bf;
        border-top-width: 0;
    }

    .lists-container {
        display: flex;
        align-items: start;
        padding: 0 0.8rem 0.8rem;
        overflow-x: auto;
        height: calc(100vh - 8.6rem);
        margin-top: 60px;
    }

    .list {
        flex: 0 0 27rem;
        display: flex;
        flex-direction: column;
        background-color: #e2e4e6;
        max-height: calc(100vh - 11.8rem);
        border-radius: 0.3rem;
        margin-right: 1rem;
    }

    .list:last-of-type {
        margin-right: 0;
    }

    .list-title {
        font-size: 1.4rem;
        font-weight: 700;
        color: #333;
        padding: 1rem;
    }

    .list-items {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-content: start;
        padding: 0 0.6rem 0.5rem;
        overflow-y: auto;
    }

    .list-items::-webkit-scrollbar {
        width: 1.6rem;
    }

    .list-items::-webkit-scrollbar-thumb {
        background-color: #c4c9cc;
        border-right: 0.6rem solid #e2e4e6;
    }

    .list-items li {
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 1.3;
        background-color: #fff;
        padding: 0.65rem 0.6rem;
        color: #4d4d4d;
        border-bottom: 0.1rem solid #ccc;
        border-radius: 0.3rem;
        margin-bottom: 0.6rem;
        word-wrap: break-word;
        cursor: pointer;
    }

    .list-items li:last-of-type {
        margin-bottom: 0;
    }

    .list-items li:hover {
        background-color: #eee;
    }

    .add-card-btn {
        display: block;
        font-size: 1.4rem;
        font-weight: 400;
        color: #838c91;
        padding: 1rem;
        text-align: left;
        cursor: pointer;
    }

    .add-card-btn:hover {
        background-color: #cdd2d4;
        color: #4d4d4d;
        text-decoration: underline;
    }


    .add-list-btn {
        flex: 0 0 27rem;
        display: block;
        font-size: 1.4rem;
        font-weight: 400;
        background-color: #006aa7;
        color: #a5cae0;
        padding: 1rem;
        border-radius: 0.3rem;
        cursor: pointer;
        transition: background-color 150ms;
        text-align: left;
        margin-left: 15px;
    }

    .add-list-btn:hover {
        background-color: #005485;
    }

    .add-card-btn::after,
    .add-list-btn::after {
        content: '...';
    }
 
    
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Trello</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="/css/style.css" rel="stylesheet">
    </head>

    <body>
        <!-- Masthead -->
        <header class="masthead">
            <div class="boards-menu">
                <div class="board-search">
                    <input type="search" class="board-search-input" aria-label="Board Search">
                    <i class="fas fa-search search-icon" aria-hidden="true"></i>
                </div>
            </div>
            <div class="logo">
                <h1><i class="fab fa-trello logo-icon" aria-hidden="true"></i>Trello</h1>
            </div>
            <div class="user-settings" style="height: 20px;margin-bottom:35px;">
                <a href="profile.html">
                    <img src="https://img.icons8.com/wired/64/000000/settings.png">
                </a>
            </div>
        </header>
        <!-- Lists container -->
        <section class="lists-container">
            <div class="list" id="dragabble_card">
                <h3 class="list-title">Tasks to Do</h3>
                <ul class="list-items" id="parent">
                    <li id="repeatTHIS"> </li>
                </ul>
                <button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
            </div>
            <div class="list" id="dragabble_card1">
                <h3 class="list-title">Completed Tasks</h3>
                <ul class="list-items" id="parent">
                    <li id="repeatTHIS"> </li>
                </ul>
                <button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
            </div>
            <div class="list" id="dragabble_card">
                <h3 class="list-title">Tasks to Do</h3>
                <ul class="list-items" id="parent">
                    <li id="repeatTHIS"> </li>
                </ul>
                <button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
            </div>
            <button class="add-list-btn btn">Add a list</button>
        </section>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="script/script.js">

        </script>
    </body>

    </html>

1 个解决方案

解决方案1
 1 已采纳  2019-08-30 09:19:14

You could use the HTML Attribute called contenteditable , this will allow the users to edit html content on the element! 您可以使用称为contenteditable的HTML 属性 ，这将允许用户编辑元素上的html内容！ But if you need to save the changes, you have to add some javascript AJAX request into your PHP page that may save the changes into a database or a file or whatever else. 但是，如果需要保存更改，则必须在PHP页面中添加一些javascript AJAX请求，这可能会将更改保存到数据库或文件或其他文件中。 Hope my answer would be useful for you! 希望我的回答对您有用！ 

 window.isEditingALi=false; document.addEventListener("click", function(e){ //Of course you can merge this EventListener with the next one but I am separing them just to make things clear for you ! const elementsIdSelector="editableLi"; e=(e||window.event); e.preventDefault(); const path=e.path; for(var i=0;i<path.length-4;i++){ if(path[i].tagName=="LI"&&path[i].id==elementsIdSelector){ //Found a Li element with the id required ( Even dynamically created li would fires ! ) //Do whatever you want there path[i].addEventListener("click", function(){ if(this.getAttribute("contenteditable")!="true"){ const wantEdit=window.confirm("You want to edit this element content ?"); if(wantEdit){ this.setAttribute("contenteditable", true); window.isEditingALi=this; this.focus(); }else{ window.isEditingALi=false; } } }); } } }); document.addEventListener("click", function(e){ e=(e||window.event); e.preventDefault(); const path=e.path; let canGetReset=true; for(var i=0;i<path.length-4;i++){ if(path[i]==window.isEditingALi) canGetReset=false; } if(canGetReset&&window.isEditingALi){ window.isEditingALi.removeAttribute("contenteditable"); //Here you can add your Ajax request or whatever function you want to do after the user finish editing the li .. alert("Li has been changed successfully !"); window.isEditingALi=false; } }); //This is just an additional function to test if the dynamically created element would work or not ! function createEditableLi(){ const ul=document.querySelector("ul"); const newLi=document.createElement("li"); newLi.setAttribute("id", "editableLi"); newLi.innerHTML="New Li (Created dynamically)"; ul.appendChild(newLi); } 
 body{ font-family: Arial, sans-serif; font-size: 14px; } 
 You can actually edit these Li by clicking and apply any changes you want ! (Even dynamically created elements are supported now!) <br> <ul> <li id="editableLi"> First Li</li> <li id="editableLi"> Second Li</li> <li id="editableLi"> Third Li</li> <li id="editableLi"> Another Li</li> <li id="editableLi"> More Li</li> </ul> <br> <button onclick="createEditableLi()">Create a New Li Dynamically</button>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在Javascript中将图标化的li项添加到ul？ - How to add an iconed li item to ul in Javascript? 如何使用 JavaScript 在单击时将 CSS styles 添加到列表元素，但在单击另一个 li 项目时将其删除？ - How can I use JavaScript to add CSS styles to a list element when clicked, but remove it when another li item is clicked? 如何使用JavaScript代码在活动Li上添加类 - How can I add class on active li with JavaScript code 当我在父项上选择一个项目时，如何在其上添加活动类。 使用javascript - how do i add an active class on the parent li when i select an item on it. using javascript 如何缩小listview元素/项目？如何更改图片和文字的高度？ - How can I make the listview li-element/item smaller?How change height with image and text? 如何将多个数据添加到<li> ?</li> - How can I add multiple data to <li>? 将子菜单指示器添加到li项目普通javascript - Add submenu indicator to li item plain javascript JavaScript：如何在点击时更改项目的文字？ - JavaScript: how can I, on click, change the text of my item? 如何在JavaScript中获取所选项目的文本？ - How can I get the selected item's text in JavaScript? 如何使用 jquery 或常规 javascript、wordpress 主题删除 li 内的文本 - How i can delete text inside li with jquery or regular javascript, wordpress theme
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM