在Javascript

时间:2017-08-27 12:02:13

标签: javascript jquery

我有一系列带有“.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>

3 个答案:

答案 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元素:

&#13;
&#13;
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;
&#13;
&#13;