小贝子编程

如何将jQuery应用于DOM中的每个列表项



下面是正在发生的事情的代码片段。如果你在输入中键入task，然后只添加三次，你可以看到当你点击下面添加的项目时，只有第一个和第三个会得到删除线。如果添加四到五个项目，也会出现类似的问题。

// View Controller
let UICtrl = (function () {
let DOMstrings = {
inputBtn: '#input-btn',
toDo: '#text-input',
listContainer: '#to-do-list'
};
return {
getInput: function() {
return {
item: document.querySelector(DOMstrings.toDo).value
};
},
addListItem: function(obj) {
let html, newHtml, element;
// Create HTML string with placeholder text

element = DOMstrings.listContainer;

if(obj.toDo) {} 
else {
return
};
html = '<li name= "list-item-task" id= "list-item-%id%" class="list-item-task">%toDo%<ion-icon id="icon-remove" name="close-circle-outline" class="icon-remove animate__animated"></ion-icon></li>';

newHtml = html.replace('%id%', obj.id);
newHtml = newHtml.replace('%toDo%', obj.toDo);
newHtml = newHtml.replace('%date%', obj.date);

// Insert the HTML into the DOM
document.querySelector(element).insertAdjacentHTML('beforeend', newHtml);
},

jQuery: (function() {

//click list items to add strikethrough
$(".list-item-task").click(function () {

if ($(this).hasClass("task-complete")) {
$(this).removeClass("task-complete")
} else {
$(this).addClass("task-complete")
} 

});
}),
getDOMstrings: function() {
return DOMstrings;
}
};
})();
let listCtrl = (function (){
let Item = function(id, toDo, date) {
this.id = id;
this.toDo = toDo;
this.date = date;
};

let toDoList = [];

return {
addItem: function(toDo, date) {
let newItem, ID;

// Create new ID
if (toDoList.length > 0) {
ID = toDoList.length;
} else {
ID = 0;
}

newItem = new Item(ID, toDo, date)

toDoList.push(newItem);
return newItem;

},
}
})(); 

let controller = (function (UICtrl, listCtrl) { 
let DOM = UICtrl.getDOMstrings();
let setupEventListeners = function() {

document.querySelector(DOM.inputBtn).addEventListener('click', ctrlAddItem);
};
let ctrlAddItem = function () {

let input, newItem;  

input = UICtrl.getInput();
newItem = listCtrl.addItem(input.item, input.date);
UICtrl.addListItem(newItem);
UICtrl.jQuery();
};
return {
init: function() {
setupEventListeners();
}
};
})(UICtrl, listCtrl);

controller.init();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*----------------------------------------------*/
/*HEADER*/
/*----------------------------------------------*/
html, 
body {
background-color: #fff;
color: #000;
font-family: 'Lato', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
.row {
background-color: rgba(255, 255, 255, .55);
width: 100%;
}
.main-nav li {
color: #000;
font-family: 'Lato', sans-serif;
font-size: 20px;
font-weight: 400;
display: inline-block;
border: none;
width: 20%;
}
.main-nav li:hover {
border-bottom: 2px solid #e67e22;
background: transparent;
}
.input-container {
text-align: center;
display: block;
padding-top: 20px;
}
.input-container {
background-color: rgb(248, 248, 248);
text-align: center;
height: 80px;
float: inline-block;
}
.text-input {
width: 37.5%;
height: 50%;
font-size: 18px;
font-family: 'Lato', sans-serif;
border: 1px solid #b9b9b9;
border-radius: 5px;
}
.date-input {
width: 15%;
height: 50%;
font-size: 18px;
font-family: 'Lato', sans-serif;
border: 1px solid #b9b9b9;
border-radius: 5px;
}
.btn-add-item {
height: 40px;
width: 6.25%;
font-size: 18px;
font-family: 'Lato', sans-serif;
color: #ffb325;
background-color: transparent;
border: 2px solid #ffb325;
border-radius: 5px;
}
.list-container {
position: relative;
left: 25%;
margin-top: 10px;
}
.list-item-task {
border-radius: 5px;
}
li {
text-align: center;
width: 50%;
display: block;
border: 1px solid #b9b9b9;
padding: 10px 30px 10px 30px;
}
li:hover {
background-color: #ececec;
}
.task-complete {
text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>    
</header>
<div class="input-container">
<input type="text" id="text-input" class="text-input" placeholder="   Task" required>
<input type="submit" class="btn-add-item icon" id='input-btn' value='Add Item'></input>
</div>
<div class="list-container">
<ul id='to-do-list'>

</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</html>

我的jQuery代码只应用于HTML中的其他列表项。在开发工具中，我可以看到它注册了click事件侦听器，但在某些项目需要时，它不会添加类。它将成功地将其添加到列表中添加的最后一个项目，但不会添加到之前的项目。

我意识到这个问题可能存在于代码中的其他地方，并希望能思考一下是什么导致了这个问题。

$(".list-item-task").click(function () {

if ($(this).hasClass("task-complete")) {
$(this).removeClass("task-complete")
} else {
$(this).addClass("task-complete")
} 

});

这是一张显示问题的图片

谢谢！

正如您在示例中看到的那样，您的代码正在工作，但您可以使用$(this).toggleClass("task-complete")以获得与if语句相同的结果。

注意

如果单击事件没有激发，则可能会在创建元素之前加载脚本。

演示

$(".list-item-task").click(function() {
$(this).toggleClass("task-complete")
});
.task-complete {
text-decoration: line-through;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="list-item-task task-complete">1</li>
<li class="list-item-task">2</li>
<li class="list-item-task">3</li>
</ul>

工作演示

// View Controller
let UICtrl = (function() {
let DOMstrings = {
inputBtn: '#input-btn',
toDo: '#text-input',
listContainer: '#to-do-list'
};
return {
getInput: function() {
return {
item: document.querySelector(DOMstrings.toDo).value
};
},
addListItem: function(obj) {
let html, newHtml, element;
// Create HTML string with placeholder text
element = DOMstrings.listContainer;
if (obj.toDo) {} else {
return
};
html = '<li name= "list-item-task" id= "list-item-%id%" class="list-item-task">%toDo%<ion-icon id="icon-remove" name="close-circle-outline" class="icon-remove animate__animated"></ion-icon></li>';
newHtml = html.replace('%id%', obj.id);
newHtml = newHtml.replace('%toDo%', obj.toDo);
newHtml = newHtml.replace('%date%', obj.date);
// Insert the HTML into the DOM
document.querySelector(element).insertAdjacentHTML('beforeend', newHtml);
},
jQuery: (function() {
//click list items to add strikethrough
}),
getDOMstrings: function() {
return DOMstrings;
}
};
})();
$("#to-do-list").on('click', '.list-item-task', function() {
$(this).toggleClass("task-complete")
});
let listCtrl = (function() {
let Item = function(id, toDo, date) {
this.id = id;
this.toDo = toDo;
this.date = date;
};

let toDoList = [];
return {
addItem: function(toDo, date) {
let newItem, ID;
// Create new ID
if (toDoList.length > 0) {
ID = toDoList.length;
} else {
ID = 0;
}
newItem = new Item(ID, toDo, date)
toDoList.push(newItem);
return newItem;
},
}
})();

let controller = (function(UICtrl, listCtrl) {
let DOM = UICtrl.getDOMstrings();
let setupEventListeners = function() {
document.querySelector(DOM.inputBtn).addEventListener('click', ctrlAddItem);
};
let ctrlAddItem = function() {
let input, newItem;
input = UICtrl.getInput();
newItem = listCtrl.addItem(input.item, input.date);
UICtrl.addListItem(newItem);
UICtrl.jQuery();
};
return {
init: function() {
setupEventListeners();
}
};
})(UICtrl, listCtrl);
controller.init();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/*----------------------------------------------*/

/*HEADER*/

/*----------------------------------------------*/
html,
body {
background-color: #fff;
color: #000;
font-family: 'Lato', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
.row {
background-color: rgba(255, 255, 255, .55);
width: 100%;
}
.main-nav li {
color: #000;
font-family: 'Lato', sans-serif;
font-size: 20px;
font-weight: 400;
display: inline-block;
border: none;
width: 20%;
}
.main-nav li:hover {
border-bottom: 2px solid #e67e22;
background: transparent;
}
.input-container {
text-align: center;
display: block;
padding-top: 20px;
}
.input-container {
background-color: rgb(248, 248, 248);
text-align: center;
height: 80px;
float: inline-block;
}
.text-input {
width: 37.5%;
height: 50%;
font-size: 18px;
font-family: 'Lato', sans-serif;
border: 1px solid #b9b9b9;
border-radius: 5px;
}
.date-input {
width: 15%;
height: 50%;
font-size: 18px;
font-family: 'Lato', sans-serif;
border: 1px solid #b9b9b9;
border-radius: 5px;
}
.btn-add-item {
height: 40px;
width: 6.25%;
font-size: 18px;
font-family: 'Lato', sans-serif;
color: #ffb325;
background-color: transparent;
border: 2px solid #ffb325;
border-radius: 5px;
}
.list-container {
position: relative;
left: 25%;
margin-top: 10px;
}
.list-item-task {
border-radius: 5px;
}
li {
text-align: center;
width: 50%;
display: block;
border: 1px solid #b9b9b9;
padding: 10px 30px 10px 30px;
}
li:hover {
background-color: #ececec;
}
.task-complete {
text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
</header>
<div class="input-container">
<input type="text" id="text-input" class="text-input" placeholder="   Task" required>
<input type="submit" class="btn-add-item icon" id='input-btn' value='Add Item'></input>
</div>
<div class="list-container">
<ul id='to-do-list'>
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</html>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium