Wie würde ich ein bestimmtes Listenelement aus einer ungeordneten Liste aus einem modalen Popup-Textfeld bearbeiten

Ich glaube, dies zu verwenden, könnte der beste Weg sein, um darüber zu gehen. Obwohl ich zugegebenermaßen nicht vollständig verstehe, wie man dies außerhalb eines Objektliterals verwendet.Wie würde ich ein bestimmtes Listenelement aus einer ungeordneten Liste aus einem modalen Popup-Textfeld bearbeiten

Grundsätzlich möchte ich modalControls.editModal(), den Textknoten innerhalb der spezifischen li.list-group-Element, die geklickt wurde (insbesondere die <i class="fa fa-pencil-square-o float-right"></i>, die angeklickt wurde) ändern.

Ich kann den richtigen Textmodus in der Konsole zurückgeben, aber wenn ich mehr als ein li.list-group-Element im Dokument habe, gibt es immer das erste zurück.

Sie den HTML und Javascript unten sehen können, und den Arbeitscode hier: 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);

Quelle

2017-12-29 Greg

Eine Möglichkeit, den Strom zu speichern, wäre Listenelement in einer globalen Variablen. So etwas wie ...

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; 
     // ... 
    } 
};

Ein anderer Weg sein kann, um die aktuelle Liste Artikel markieren (beispielsweise durch wie das Hinzufügen einer Klasse edit) auf den Modal öffnen. Nach dem Speichern, d. H. editItem, suchen Sie nach dem <li> Element mit Klasse edit mit document.getSelector('li.edit'), ändern Sie es, und entfernen Sie die Klasse.

Quelle

2017-12-29 15:59:41 Mikey

Vielen Dank! Ich habe das Gefühl, die Liste in einem Array zu speichern und diese dann in HTML auszugeben, würde mehr Änderungen erfordern, aber effizienter sein. Welche Methode bevorzugen Sie? – Greg

Also, im Grunde, müssen Sie das <li> Element speichern, bearbeitet und Sie können es mit der parentElement Eigenschaft des Elements tun, um modalControls.editModal geleitet wird, und dann, in listActions.editItem den Wert ersetzen.

let currentElement; // Element being edited 

let listActions = { 
    editItem: function() { 
    currentElement.innerHTML = currentElement.innerHTML.replace(currentElement.innerText, editInput.value); 
    editInput.value = ''; 
    } 
} 

let modalControls = { 
    editModal: function(i) { 
    // *i* is *this* in *modalControls.editModal(this)* 
    modalContainer.style.display = 'block'; 
    currentElement = i.parentElement; 
    modalContainer.getElementsByTagName('input')[0].value = currentElement.innerText; 
    } 
}

Quelle

2017-12-29 16:00:37 luisenrike

Wie würde ich ein bestimmtes Listenelement aus einer ungeordneten Liste aus einem modalen Popup-Textfeld bearbeiten

Antwort

Verwandte Themen