私は現在Jqueryを学習していて、私の質問に対する答えを見つけることができません。私は買い物リストアプリを構築しており、あなたが入力したものをページに追加することになっています。それは単語の周りのボックスのクラスに追加されますが、私はあなたが同じdivのチェックボックスと削除ボックスに追加する方法について知りません。私が試したあらゆる方法は、別のdivにそれを追加したり、既に追加されているもののプロパティを変更したりします。私はこれが私には新しいことを考えると十分にはっきりと説明していないかもしれませんが、もっと情報が必要な場合はただ聞いてください。ありがとう。 https://github.com/Masonwharr/shoppinglist/tree/master/Shopping-List https://i.stack.imgur.com/v0eky.pngdivとクラスを追加する
基本的には、あなたの質問に答えるために、あなたは、ボタンがクリックされたときにjQueryで追加したいhtmlコードのすべてを記述する必要があります。
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);
}
とあなたがいる場所を指定できるように、以下のようなあなたの<ul>リストにIDを設定します。あなたはそれが下のAddToshoppingList()関数を呼び出しますボタンを「送信」をクリックして、このような何かを行うことができますあなたが始める必要があり、あなたはそれらがアイテムを削除するようにクリックされたときに、他のjqueryの関数を呼び出すためのボタンをカスタマイズすることができます
<ul id="ShoppingList" class="shopping-list">
... snip ...
</ul>
：に新しい項目を追加します。
私が正しく理解しているかわかりません。おそらくもっと詳しく説明する必要があります。私の考えは、ページから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>
（それは本当に...偶数ページ上に既にあるもののためのテンプレートでなければなりません）... – DaniP