如何从模态弹出文本字段

时间：2017-12-29 14:45:35

标签： javascript dom this

我相信使用它可能是解决这个问题的最好方法。虽然我承认并不完全理解如何在对象字面之外使用它。

基本上我希望modalControls.editModal（）更改单击的特定li.list-group-item中的文本节点（特别是单击的<i class="fa fa-pencil-square-o float-right"></i>）。

我可以在控制台中返回正确的文本模式，但是如果我在文档中有多个li.list-group-item，它总是返回第一个。

您可以在下面看到html和javascript以及工作代码：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);

2 个答案:

答案 0 :(得分：1)

一种方法是将当前列表项存储在全局变量中。有点像... 

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

另一种方法可以是在打开模态时标记当前列表项（例如，通过添加类edit）。在保存editItem后，您使用document.getSelector('li.edit')搜索包含<li>类的edit元素，修改它，然后删除该类。

答案 1 :(得分：0)

因此，基本上，您需要存储正在编辑的<li>元素，您可以使用传递给parentElement的元素的modalControls.editModal属性来执行此操作，然后在{ {1}}替换值。

listActions.editItem
相关问题
最新问题