有人可以帮助我/解释我该怎么做或者是否可能? 我有一个简单的html代码用于购物清单:
<!DOCTYPE html>
<html>
<head>
<title>Let's buy...</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h2 class="title">My grocery list<span id="counter"></span> </h2>
<ul id="list-items"></ul>
<div id="newItemButton"><button href="#" id="showForm">new item</button></div>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add item..."/>
<input type="submit" id="addButton" value="add" />
</form>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<!-- <script type="text/javascript"
src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> -->
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>
我是用户在列表中添加元素 - 当用户添加项目时,该项目附带一个按钮。现在,我想要那个按钮&#34;更改项目&#34;添加4个带append()的按钮,我想要每个按钮,当点击更改项目的颜色时,例如红色,绿色,橙色和灰色 - 取决于用户的喜好。 我试图添加这些按钮,但我似乎没有添加它,它不会出现在页面上 - 只是说 - 我试图只添加一个按钮:)。 这是我的jQuery代码......:
$(function() {
let $list, $newItemForm, $newItemButton;
let item = '';
$list = $('ul');
$newItemForm = $('#newItemForm');
$newItemButton = $('#newItemButton');
function updateCount() {
let items = $('li').length;
$('#counter').text(items);
}
updateCount();
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click', function() {
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit', function(e) {
e.preventDefault();
let text = $('input:text').val();
$list.append('<li>' + text + '<button id="btn-change">change item</button><hr></li>');
$('input:text').val('');
updateCount();
});
&#13;
这是=&#39;按钮添加过程&#39; :
$('#btn-change').one('click', function() {
let b = $('<input/>').attr({
type: "button",
id: "hot",
value: 'hot'
});
$("button").append(b);
});
&#13;
答案 0 :(得分:0)
还需要解决其他问题,例如多个按钮,如何实例化事件处理程序等等。但是,为了回答你的问题,为什么我的新输入不会出现&#34;。
按钮元素不应包含和输入元素。你可以看出为什么那没有意义。因此,要在此之后创建类型按钮的新输入并且不附加TO,请使用.after
。现在假设实际点击的是我们想要附加的内容,我们可以使用this
并附加到ID为btn-change
的按钮
$('#btn-change').one('click', function() {
let b = $('<input/>').attr({
type: "button",
id: "hot",
value: 'hot'
});
$(this).after(b);
});
这是另一个选项,只是使用一个执行相同功能的不同方法,做同样的事情,但也许名称使意图更清晰。
$('#btn-change').one('click', function() {
let b = $('<input/>').attr({
type: "button",
id: "hot",
value: 'hot'
});
b.insertAfter(this);
});
现在我们可以添加一个按钮,我们观察到我们添加了这个动态点击的按钮,因此我们需要允许我们的事件处理程序也是动态的,即将它附加到按钮的容器中。
list-items
是我们的容器,所以我们依附于此。
$('#list-items').one('click', '#btn-change',function() {
let b = $('<input/>').attr({
type: "button",
id: "hot",
value: 'hot'
});
b.insertAfter(this);
});
既然我们有了事件处理程序,我们也注意到重复的id无效,所以我们修改为使用类而不是id。
$('#list-items').one('click', '.btn-change',function() {
let b = $('<input/>').attr({
type: "button",
class: "hot",
value: 'hot'
});
b.insertAfter(this);
});
现在我们有一些解释,让我们做一个解决方案
$(function() {
let $list, $newItemForm, $newItemButton;
let item = '';
$list = $('#list-items'); // use faster id
$newItemForm = $('#newItemForm');
$newItemButton = $('#newItemButton');
function updateCount() {
let items = $list.find('li').length; // get inside our list
$('#counter').text(items);
}
updateCount();
$newItemButton.show();
$newItemForm.hide();
$newItemButton.on('click', function() {
$newItemButton.hide();
$newItemForm.show();
});
function addButton(place, b) {
let bt = $('<input/>').attr({
type: "button",
class: b + "button colorbutton",
value: b
}).data("colorclass", b + "thing");
bt.insertAfter(place);
}
// perhaps change to button type not submit type?
$newItemForm.on('submit', function(e) {
e.preventDefault();
let text = $('#itemDescription').val(); // use fast id
text = text=""?"new":text;//avoid empty text
$list.append('<li><span class="desc">' + text + '</span><button type="button" class="btn-change">change item</button><hr></li>');
$('#itemDescription').val('');
updateCount();
});
$('#list-items').on('click', '.colorbutton', function() {
$(this).parent().find('.desc')
.removeClass("hotthing greenthing orangething greything")
.addClass($(this).data("colorclass"));
});
//Note the change here from discussion, still adds the buttons but more modular, disables button to avoid second click vs the .one, works for new items
$('#list-items').on('click', '.btn-change', function() {
$(this).prop("disabled", true); // only add once so disable it
// add the color buttons, matches classes in css
addButton(this, "hot");
addButton(this, "green");
addButton(this, "orange");
addButton(this, "grey");
});
});
&#13;
.hotbutton {
color: red;
}
.greenbutton {
color: green;
}
.orangebutton {
color: orange;
}
.greybutton {
color: grey;
}
.hotthing {
background-color: red;
}
.greenthing {
background-color: green;
}
.orangething {
background-color: orange;
}
.greything {
background-color: grey;
}
#list-items {
border: solid lime 1px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<h2 class="title">My grocery list<span id="counter"></span> </h2>
<ul id="list-items"></ul>
<div id="newItemButton"><button type="button" id="showForm">new item</button></div>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add item..." />
<input type="submit" id="addButton" value="add" />
</form>
</body>
&#13;
答案 1 :(得分:0)
您正在处理的问题是您尝试从动态生成的元素触发事件。附加事件时,页面中未加载#btn-change 元素。根据{{3}},您可以添加选择器。您必须将事件附加到页面的稳定元素中,例如 ul #list-items
所以你的代码看起来像这样
$("ul#list-items").one('click','#btn-change', function() {
let b = $('<input/>').attr({
type: "button",
id: "hot",
value: 'hot'
});
$("button").append(b);
});
或者你可以用语法附加事件。
此外,我还建议您在同一页面上多次使用的元素使用类而不是id(例如<button id='btn-change'></button>
),您的页面中的ID必须是唯一的。
所以我建议的代码看起来像这样
$newItemForm.on('submit', function(e) {
e.preventDefault();
let text = $('input:text').val();
$list.append('<li>' + text + '<button class="btn-change">change item</button><hr></li>');
$('input:text').val('');
updateCount();
});
将id='btn-change'
更改为class='btn-change'
和btn-change点击事件的代码
$('ul#list-items').one('click','.btn-change', function() {
let btnContainer = $("<div></div>").css("display","inline-block").attr({
class: "btn-container"
});
btnContainer.append(
$('<input/>').attr({
type: "button",
class: "hot", //use class instead of id in case you generate more than 1 element
value: 'hot'
})
).append(
$('<input/>').attr({
type: "button",
class: "green", //use class instead of id in case you generate more than 1 element
value: 'green'
})
).append(
$('<input/>').attr({
type: "button",
class: "grey", //use class instead of id in case you generate more than 1 elements
value: 'grey'
})
).append(
$('<input/>').attr({
type: "button",
class: "orange", //use class instead of id in case you generate more than 1 element
value: 'orange'
})
);
btnContainer.insertBefore(this);
$(this).hide();//or remove based on what you want to achieve
});
这里我使用 .btn-change 作为选择器,我正在创建一个容器元素来保存四个按钮,然后在 .btn-change之前添加四个按钮的容器按钮并隐藏按钮。
您可以稍后添加将删除/隐藏四个按钮的容器的代码部分,并显示.btn-change按钮