追加與div和類

-2

好吧，所以我目前正在學習JQuery，並找不到我的問題的答案。我正在建立一個購物清單應用程序，它應該追加到頁面上，無論你輸入什麼。它附加了圍繞單詞框的類，但是我不知道如何在同一個div中添加檢查和刪除框。我嘗試的每種方法都是在單獨的div中將其添加到外部，或者更改已添加的屬性。考慮到這對我來說是新的，我可能沒有足夠清楚地解釋它，但如果您需要更多信息，只需詢問。謝謝。 https://github.com/Masonwharr/shoppinglist/tree/master/Shopping-List https://i.stack.imgur.com/v0eky.png 追加與div和類

來源

2016-11-08 William

我們需要在這裏看到足夠的代碼複製您的問題... – DaniP

基本上，回答你的問題，你寫出來，所有你想要的jQuery添加按鈕被點擊時的HTML代碼。你可以做這樣的事情，當你點擊「提交」，其中按鈕，它會調用下面的AddToshoppingList()功能：

function AddToShoppingList(itm) { 
    var li += "<li><span class='shopping-item'>" + itm.Name + "</span>"; 
    li += "<div class='shopping-item-controls'>"; 
    li += "<button class='shopping-item-toggle'><span class='button-label'>check</span></button>"; 
    li += "<button class='shopping-item-delete'><span class='button-label'>delete</span></button>"; 
    li += "</div></li>"; 
    $("#ShoppingList").append(li);  
}

和ID設置爲您<ul>列表如下圖所示，這樣就可以指定你在哪裏追加新的項目：

<ul id="ShoppingList" class="shopping-list"> 
... snip ... 
</ul>

，應該讓你開始，你可以自定義的按鈕來調用其他的jQuery函數那些被點擊，如刪除的項目時。

來源

2016-11-08 21:38:16 Wellspring

不知道我是否理解正確。您可能必須詳細解釋，以便我們能夠更好地幫助您。我的想法是從頁面獲取html，並在使用js將html附加到頁面時使用它。（這確實應該是一個模板，即使對於已經在網頁上的...）

$(document).ready(function(){ 
 
    $('#js-shopping-list-form').submit(function(event){ 
 
    event.preventDefault(); 
 
     var inputfield = $('#entry').val(); 
 
     console.log(inputfield); 
 
     $('.shopping-list').append('<li><span class="shopping-item">'+ inputfield + '</span>' + $('.shopping-item-controls').html() + '</li>'); 
 
     // This is incorrect, and adds an outside empty box. $('.shopping-list').append('<div class="shopping-item-controls"> <button class="shopping-item-toggle">' + '</button> </div>'); 
 
    //$('inputfield').appendTo('body').addClass('.shopping-item'); 
 
    }); 
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    font-family: 'Roboto', sans-serif; 
 
} 
 

 
button, input[type="text"] { 
 
    padding: 5px; 
 
} 
 

 
button:hover { 
 
    cursor: pointer; 
 
} 
 

 
#shopping-list-item { 
 
    width: 250px; 
 
} 
 

 
.container { 
 
    max-width: 600px; 
 
    margin: 0 auto; 
 
} 
 

 
.shopping-list { 
 
    list-style: none; 
 
    padding-left: 0; 
 
} 
 

 
.shopping-list > li { 
 
    margin-bottom: 20px; 
 
    border: 1px solid grey; 
 
    padding: 20px; 
 
} 
 

 
.shopping-item { 
 
    display: block; 
 
    color: grey; 
 
    font-style: italic; 
 
    font-size: 20px; 
 
    margin-bottom: 15px; 
 
} 
 

 
.shopping-item__checked { 
 
    text-decoration: line-through; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Shopping List</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
<script src="js/script.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
 
    <link rel="stylesheet" type="text/css" href="CSS/styles.css"> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
    <h1>Shopping List</h1> 
 

 
    <form id="js-shopping-list-form"> 
 
     <label for="shopping-list-entry">Add an item</label> 
 
     <input type="text" name="shopping-list-entry" placeholder="e.g., broccoli" id="entry"> 
 
     <button type="submit">Add item</button> 
 
    </form> 
 

 
    <ul class="shopping-list"> 
 
     <li> 
 
     <span class="shopping-item">apples</span> 
 
     <div class="shopping-item-controls"> 
 
      <button class="shopping-item-toggle"> 
 
      <span class="button-label">check</span> 
 
      </button> 
 
      <button class="shopping-item-delete"> 
 
      <span class="button-label">delete</span> 
 
      </button> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <span class="shopping-item">oranges</span> 
 
     <div class="shopping-item-controls"> 
 
      <button class="shopping-item-toggle"> 
 
      <span class="button-label">check</span> 
 
      </button> 
 
      <button class="shopping-item-delete"> 
 
      <span class="button-label">delete</span> 
 
      </button> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <span class="shopping-item shopping-item__checked">milk</span> 
 
     <div class="shopping-item-controls"> 
 
      <button class="shopping-item-toggle"> 
 
      <span class="button-label">check</span> 
 
      </button> 
 
      <button class="shopping-item-delete"> 
 
      <span class="button-label">delete</span> 
 
      </button> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <span class="shopping-item">bread</span> 
 
     <div class="shopping-item-controls"> 
 
      <button class="shopping-item-toggle"> 
 
      <span class="button-label">check</span> 
 
      </button> 
 
      <button class="shopping-item-delete"> 
 
      <span class="button-label">delete</span> 
 
      </button> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
</body> 
 
</html>

來源

2016-11-08 21:43:07 Dragonmon

追加與div和類

回答

相關問題