我相信使用它可能是解决这个问题的最佳方法。尽管我承认我并不完全理解如何在对象文字之外使用它。
基本上，我希望 modalControls.editModal() 更改单击的特定 li.list-group-item 内的文本节点(特别是单击的 <i class="fa fa-pencil-square-o float-right"></i>)。
我能够在控制台中返回正确的文本模式，但如果文档中有多个 li.list-group-item，它总是返回第一个。
您可以在下面看到 html 和 javascript，以及这里的工作代码:http://gfitzpatrickportfolio.com/practice/
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Bootstrap + Javascript List</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
crossorigin="anonymous" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="input-group">
<input type="text" class="rounded form-control" id="myInput" />
<span id="myButton" class="input-group-addon bg-info text-white" onClick="listActions.addItem()">ADD</span>
</div>
<ul class="list-group" id="myOutput">
</ul>
</div> <!-- .containter -->
<!--modal-->
<div id="outter-modal">
<div id="modal-content" class="input-group bg-white col-lg-4 col-sm-6 col-10">
<input type="text" class="rounded form-control" id="editInput" />
<span id="editBtn" class="input-group-addon bg-info text-white" onClick="listActions.editItem()">EDIT</span>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
Javascript:
let myOutput = document.getElementById('myOutput');
let myInput = document.getElementById('myInput');
let listGroupItems = document.querySelectorAll('.list-group-item');
let modalContainer = document.getElementById('outter-modal');
let editInput = document.getElementById('editInput');
let listActions = {
addItem: function() {
if (myInput.value === '') {
console.log('Field is empty!');
} else {
let li = document.createElement('li');
let inputValue = document.createTextNode(myInput.value);
li.innerHTML = '<i class="fa fa-times-circle-o float-right" aria-hidden="true" onClick="listActions.removeItem(this)"></i> <i class="fa fa-pencil-square-o float-right" aria-hidden="true" onClick="modalControls.editModal(this)"></i>';
li.className = 'list-group-item';
myOutput.appendChild(li);
li.appendChild(inputValue);
}
myInput.value = '';
},
editItem: function() {
let li = document.querySelector('.list-group-item');
console.log(li.childNodes[3])
console.log(editInput.value);
editInput.value = '';
},
toggleItem: function(e) {
let selectedItem = e.target;
let checkMark = document.createElement('i');
checkMark.classList.add('fa', 'fa-check-circle', 'float-left');
if (selectedItem.classList.contains('bg-success') && selectedItem.classList.contains('list-group-item')) {
selectedItem.classList.remove('bg-success');
selectedItem.classList.remove('text-white');
let iconIndex = '';
for (let i = 0; i < selectedItem.childNodes.length; i++) {
if (selectedItem.childNodes[i].className === "fa fa-check-circle float-left") {
iconIndex = i;
}
}
selectedItem.removeChild(selectedItem.childNodes[iconIndex]);
} else if (!selectedItem.classList.contains('bg-success') && selectedItem.classList.contains('list-group-item')) {
selectedItem.classList.add('bg-success');
selectedItem.classList.add('text-white');
selectedItem.appendChild(checkMark);
}
},
removeItem: function(deleteBtn) {
//when the <i> tag is created for the X button (inside the addItem function) the onClick property passes in (this). The parameter of removeItem (item) is = to (this)
deleteBtn.parentNode.remove();
}
};
// function addItem() {
// if (myInput.value === '') {
// console.log('Field is empty!');
// } else {
// let li = document.createElement('li');
// let inputValue = document.createTextNode(myInput.value);
//
// li.innerHTML = '<i class="fa fa-times-circle-o float-right" aria-hidden="true" onClick="removeItem(this)"></i> <i class="fa fa-pencil-square-o float-right" aria-hidden="true" onClick="modalControls.editModal(this)"></i>';
// li.className = 'list-group-item';
// myOutput.appendChild(li);
// li.appendChild(inputValue);
// }
// myInput.value = '';
// }
// function editItem(item) {
// console.log(item);
// }
// function toggleItem(e) {
// let selectedItem = e.target;
// let checkMark = document.createElement('i');
// checkMark.classList.add('fa', 'fa-check-circle', 'float-left');
//
//
// if (selectedItem.classList.contains('bg-success') && selectedItem.classList.contains('list-group-item')) {
// selectedItem.classList.remove('bg-success');
// selectedItem.classList.remove('text-white');
// let iconIndex = '';
//
// for (let i = 0; i < selectedItem.childNodes.length; i++) {
// if (selectedItem.childNodes[i].className === "fa fa-check-circle float-left") {
// iconIndex = i;
// }
// }
// selectedItem.removeChild(selectedItem.childNodes[iconIndex]);
// } else if (!selectedItem.classList.contains('bg-success') && selectedItem.classList.contains('list-group-item')) {
// selectedItem.classList.add('bg-success');
// selectedItem.classList.add('text-white');
// selectedItem.appendChild(checkMark);
// }
// }
// function removeItem(deleteBtn) {
// //when the <i> tag is created for the X button (inside the addItem function) the onClick property passes in (this). The parameter of removeItem (item) is = to (this)
// deleteBtn.parentNode.remove();
// }
let modalControls = {
editModal: function() {
modalContainer.style.display = 'block';
},
closeModal: function(e) {
if(e.target === modalContainer) {
modalContainer.style.display = 'none';
}
}
};
myOutput.addEventListener('click', listActions.toggleItem);
modalContainer.addEventListener('click', modalControls.closeModal);
请您参考如下方法:
一种方法是将当前列表项存储在全局变量中。类似...
var currentListItem;
let listActions = {
// ...
editItem: function () {
if (currentListItem) {
// I believe this will change only the text and not its descendant nodes (unsure)
currentListItem.nodeValue = editInput.value;
}
// ...
},
// ...
}
let modalControls = {
// when you open the modal, set the current list item
editModal: function (btn) {
currentListItem = btn.parentNode;
// ...
},
// when you close, unset the current list item
closeModal: function (e) {
currentListItem = null;
// ...
}
};
另一种方法可以是在打开模式时标记当前列表项(例如通过添加类 edit )。保存后即 editItem ，您搜索 <li>具有类的元素 edit使用document.getSelector('li.edit') ，修改它，并删除该类。
