我有一系列带有“.newColor”类的div。当单击其中一个div时,其内容将转换为字符串,并仅在数组中尚未列出时才使用push方法添加到名为myArray的数组中。然后,myArray被转换回一系列带有“.removeItem”类的div,并显示在水平线上方。
如何点击这些“.removeItem”div,并以与添加方式类似的方式从myArray中删除divs内容(其字符串)?在查看divs内容时,将其转换为字符串并从数组中删除该字符串(如果存在)。
var myArray = [];
var myArrayLength;
var newItem = "";
$( ".newColor" ).click(function() {
newItem = $(this).text();
$( '#displayArray' ).html('');
if(myArray.indexOf(newItem) == -1) {
myArray.push(newItem);
myArrayLength = myArray.length;
}
for (var i = 0; i < myArrayLength; i++) {
$( '#displayArray' ).append( '<div class="removeItem">' + myArray[i] + '</div>');
}
});
.newColor, .removeItem {
border: 1px solid black;
cursor: pointer;
margin: 2px;
padding: 2px;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Current array:
<span id="displayArray"></span>
<hr>
Add to array:
<div class="newColor">blue</div>
<div class="newColor">red</div>
<div class="newColor">green</div>
<div class="newColor">orange</div>
<div class="newColor">purple</div>
<div class="newColor">yellow</div>
<div class="newColor">brown</div>
<div class="newColor">pink</div>
答案 0 :(得分:1)
每次数组更改时都无需渲染所有项目。最好只根据需要添加新项目并删除旧项目。
您还需要在创建新元素后添加事件处理程序。它们之前是不存在的。
nil
var myArray = [];
var newItem = "";
// Query only once - performs better
var $displayArray = $('#displayArray');
$(".newColor").click(function() {
newItem = $(this).text();
// Only add new entries to DOM.
// Skip if item is in array
if (myArray.indexOf(newItem) !== -1) {
return;
}
myArray.push(newItem);
// Generate new item and add click handler
$newItem = $('<div class="removeItem">' + newItem + '</div>');
$newItem.on('click', function(e) {
// Remove item from array and also from DOM
var $item = $(this);
var item = $item.text();
myArray.splice(myArray.indexOf(item), 1);
$item.remove();
});
$displayArray.append($newItem);
});
.newColor,
.removeItem {
border: 1px solid black;
cursor: pointer;
margin: 2px;
padding: 2px;
display: inline-block;
}
答案 1 :(得分:0)
按照您现在的步骤创建数组,然后使用myArray.splice(myArray.indexOf('colorForDeletion'), 1);
答案 2 :(得分:0)
由于您添加点击事件监听器时.removeItem
个元素不存在,您可以在父级上使用事件委派,如下所示:
$('#displayArray').on('click', '.removeItem', function(){/* ... */});
然后,您可以使用Array.prototype.slice()
从数组中删除元素,并使用jQuery的remove
函数删除DOM元素:
var myArray = [],
text = "",
index;
$(".newColor").click(function() {
text = $(this).text();
if (myArray.indexOf(text) == -1) {
myArray.push(text);
$('#displayArray').append('<div class="removeItem">' + text + '</div>');
}
});
// if we click on #displayArray and the target has the .removeItem class
$('#displayArray').on('click', '.removeItem', function() {
text = $(this).text();
index = myArray.indexOf(text);
$(this).remove();
if (index > -1) {
myArray.slice(index, 1); // remove 1 element at index `index`
}
});
&#13;
.newColor,
.removeItem {
border: 1px solid black;
cursor: pointer;
margin: 2px;
padding: 2px;
display: inline-block;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Current array:
<span id="displayArray"></span>
<hr> Add to array:
<div class="newColor">blue</div>
<div class="newColor">red</div>
<div class="newColor">green</div>
<div class="newColor">orange</div>
<div class="newColor">purple</div>
<div class="newColor">yellow</div>
<div class="newColor">brown</div>
<div class="newColor">pink</div>
&#13;