Question

我有问题。我有对象名称：“Коля”，年龄：30，我需要在此信息所在的位置创建ul。之后，我需要在onclcik上编辑此信息。在编辑（跨度）时，我想创建一个输入和一个按钮。输入内容应具有此信息的名称和年龄。目前，我正在获取它。获取它之后，我应该可以选择更改它。因此，当我单击更改按钮时，它应该保存我的更改，并且应该用于li的每一行。

var products = [
	{name: 'Коля', age: 30},
	{name: 'Вася', age: 40},
	{name: 'Петя', age: 50},
];

var ul = document.createElement("ul");

for( var i = 0; i < products.length; i++ ){
	var li = document.createElement("li");
	var span = document.createElement("span");
	span.innerHTML = products[i].name + " " + products[i].age + " " + "Edit";
	span.classList.add("newClass");

	li.addEventListener("click", editInfo);
	li.appendChild(span);
	ul.appendChild(li);
	document.body.appendChild(ul);
}

	var inputAge = document.createElement("input");

function editInfo(){
	var button = document.createElement("button");
	button.innerHTML = "Change";

	inputAge.value = this.children.innerHTML;

	document.body.appendChild(inputAge);
	document.body.appendChild(button);

}

Answer 1

您不需要每次都将UL添加到文档中。

document.body.appendChild(ul)-应该在for循环之外。

li.addEventListener("click", editInfo)-应该进行更改，并研究javascript中的事件循环概念

在下面找到合适的代码，并编写自己的“更改”功能。

var products = [
{name: 'Коля', age: 30},
{name: 'Вася', age: 40},
{name: 'Петя', age: 50},
];

var ul = document.createElement("ul");

for( var i = 0; i < products.length; i++ ){
var li = document.createElement("li");
var span1 = document.createElement("span");
var span2 = document.createElement("span");
span1.innerHTML = products[i].name + " " + products[i].age;
span2.innerHTML = " Edit";
span1.classList.add("newClass");

li.addEventListener("click", function(){return editInfo(this);});
li.appendChild(span1);
li.appendChild(span2);
ul.appendChild(li);
}

document.body.appendChild(ul);

var inputAge = document.createElement("input");

function editInfo(el){
var button = document.createElement("button");
button.innerHTML = "Change";
console.log(el)
inputAge.value = el.children[0].innerHTML;

document.body.appendChild(inputAge);
document.body.appendChild(button);

}

Answer 2

这是如何做所需事的一个例子。

我已经详细添加了评论。

如果我误解了您的问题或任何问题，请告诉我。

// preparation
var products = [
    { name: 'Коля', age: 30 },
    { name: 'Вася', age: 40 },
    { name: 'Петя', age: 50 },
];

var ul = document.createElement("ul");
document.body.appendChild(ul);

var inputAge = document.createElement("input");
// set input type as number
inputAge.setAttribute("type", "number");
var button = document.createElement("button");
button.innerHTML = "Change";
inputAge.style.display = "none";
button.style.display = "none";

document.body.appendChild(inputAge);
document.body.appendChild(button);
// preparation done

// set products to li
for (var i = 0; i < products.length; i++) {

    var li = document.createElement("li");
    setContent(li, products[i])
    ul.appendChild(li);
}

// function to set one li's content
function setContent(el, obj) {
    // rebuild the span
    var span = document.createElement("span");
    span.innerHTML = obj.name + " " + obj.age + " " + "Edit";
    // bind edit event handler
    span.addEventListener("click", editInfo);
    // reset li's content
    el.innerHTML = '';
    el.appendChild(span);
}

// what edit do
function editInfo(e) {
    // retrieve name&age
    var arr = e.target.innerHTML.split(' ');
    var name = arr[0].trim();
    var age = parseInt(arr[1]);
    // set text value to input
    inputAge.value = age;
    // show input and change button
    inputAge.style.display = "block";
    button.style.display = "block";
    
    // set change button here for easily get name
    button.onclick = function() {
      setContent(e.target, {
          name: name,
          age: inputAge.value
    })
    // hide input and button
    inputAge.style.display = "none";
    button.style.display = "none";
};
}

Answer 3

使用Jquery进行DOM操作：

var products = [{
        name: 'Коля',
        age: 30
    },
    {
        name: 'Вася',
        age: 40
    },
    {
        name: 'Петя',
        age: 50
    }
];

loadList();

function loadList() {
    var listItem = '';

    for (var key in products) {
        listItem +=
            "<li onClick=editListData('" +
            products[key].name +
            "','" +
            products[key].age +
            "','" +
            key +
            "')>" +
            products[key].name +
            ' ,' +
            products[key].age +
            '</li>';
    }
    $('.userDataList').html(listItem);
}

function editListData(name, age, key) {
    var inputContainer = $('.inputContainer');
    var in_put = `<div>
                      <div class="form-group">
                        <label for="usr">Name:</label>
                    <input type="text" value='${name}' class="form-control" id="usr" name="usr">
                      </div><br/>
                      <div class="form-group">
                       <label for="age">Age:</label>
                  <input type="text" value='${age}' class="form-control" id="age" name="age">
                      </div><br/>
                      <button type="button" onClick="updateData('${key}')"class="btn btn-primary">Primary</button>
                       </div>`;
    inputContainer.html(in_put);
}

function updateData(key) {
    var name = $('#usr').val();
    var age = $('#age').val();
    products[key] = {
        name: name,
        age: age
    };
    loadList();
    $('.inputContainer').html('');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myListData">
<ul class="userDataList"></ul>
</div>
<div class="inputContainer">
</div>

Answer 4

知道我参加聚会迟到了，

我已经用jQuery实现了您想要的。

用户无需操纵DOM进行编辑，而是在后台编辑对象，然后在按Change按钮时更新视图。

我使用data-product-index来跟踪元素本身数组中的索引。

var products = [{
    name: 'Коля',
    age: 30
  },
  {
    name: 'Вася',
    age: 40
  },
  {
    name: 'Петя',
    age: 50
  },
];

showProducts();

function showProducts() {
  // Remove old #product UL if exists
  $('#products').remove();
  // Append UL
  $('body').append('<ul id="products"></ul>');
  // Iterate over products
  products.forEach((elem, i) => {
    // Using ES6 Template Literals
    $('ul').append(`<li><span data-product-index="${i}" onclick='editInfo(this);'>${elem.name} ${elem.age} Edit</span></li>`);
  });
}

function editInfo(elem) {
  // Remove old edit field
  $('#editField').remove();
  // Append an edit div
  $('body').append(`<div id="editField">Editing Item: ${$(elem).data('product-index')}<br>Name:<br><input type="text" id="editInputName"/><br>Age:<br><input type="number" id="editInputAge"/><br><button id="editButton">Change</button></div>`);

  $('button').on('click', (e) => {
    products[$(elem).data('product-index')].name = $('#editInputName').val();
    products[$(elem).data('product-index')].age = $('#editInputAge').val();

    console.log(products[$(elem).data('product-index')]);
    // Remove click event
    $('button').off('click');
    // Remove edit field
    $('#editField').remove();

    // Show updated object
    showProducts();
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

获取信息并使用javascript进行更改

4 个答案: