Question

我一直在学习javascript以清除jquery，这就是为什么我要用jquery向你展示一个例子以及如何用js编写相同的代码

我必须这样做：

＆＃13;

var addText = document.querySelector("#addText"),
  addButton = document.querySelector("#addButton");


addText.addEventListener("keyup", function() {
  if (addText.value.trim().length > 0) {
    addButton.removeAttribute("disabled", false)
  } else {
    addButton.setAttribute("disabled", true);
  }
});

var ul = document.createElement("ul");
addButton.addEventListener("click", function() {

  var textVal = addText.value;
  var li = document.createElement("li");
  li.innerHTML = textVal + " - <span class='removeTodo' onclick='removeTodo()'>Remove</span>";
  ul.appendChild(li);
  addText.value = '';
  addText.focus();
  addButton.setAttribute("disabled", true);
});
document.body.appendChild(ul);

function removeTodo(event) {
  //
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <input type="text" name="" id="addText">
  <input type="button" value="Add" id="addButton" disabled>
</body>

</html>

＆＃13;

正如你在片段中看到的，我有removeTodo（）函数..我想删除我点击的li但在此之前我必须问我如何获得点击的属性（id，class，text， parent，child bla bla）以及如何删除或添加类（例如）？

像这样的jquery非常简单

＆＃13;

$(element).on("click", function() {

  $(this).attr("id");
  $(this).text();
  $(this).remove();
  $(this).hide();
  $(this).parents().attr("class");
})

＆＃13;

Answer 1

使用您正在使用的方法 - 您希望将事件作为参数传递给函数 - 您可以使用event.target来访问单击的元素。请注意，您需要修改onclick以在参数中包含event。

但是，更好的解决方案是在li上使用不显眼的事件处理程序，就像在代码中的所有其他元素上一样。然后，您可以使用this关键字来引用所单击的元素，类似于第二个代码块中的jQuery示例。试试这个：

var addText = document.querySelector("#addText"),
  addButton = document.querySelector("#addButton");

addText.addEventListener("keyup", function() {
  addButton.disabled = addText.value.trim().length == 0;
});

addButton.addEventListener("click", function() {
  var textVal = addText.value;
  var li = document.createElement("li");
  li.innerHTML = textVal + ' - <span class="removeTodo">Remove</span>';
  li.addEventListener('click', removeTodo);
  ul.appendChild(li);
  addText.value = '';
  addText.focus();
  addButton.setAttribute("disabled", true);
});

var ul = document.createElement("ul");
document.body.appendChild(ul);

function removeTodo() {
  // read properties here...
  console.log(this.innerHTML);
  
  // then remove the element...
  this.remove();
}

<input type="text" name="" id="addText">
<input type="button" value="Add" id="addButton" disabled>

Answer 2

您的事件对象将有一个event.target字段，用于保存您要查找的DOM对象。

Answer 3

innerHTML不是最佳做法。您应该为其添加span，addEventListner的其他元素，并将span附加到li。

    var addText = document.querySelector("#addText"),
      addButton = document.querySelector("#addButton");


    addText.addEventListener("keyup", function() {
      if (addText.value.trim().length > 0) {
        addButton.removeAttribute("disabled", false)
      } else {
        addButton.setAttribute("disabled", true);
      }
    });

    var ul = document.createElement("ul");
    addButton.addEventListener("click", function() {

      var textVal = addText.value;
      var li = document.createElement("li");
      li.innerText = textVal + ' - ';
      var span = document.createElement("span");
      span.innerText = 'Remove';
      span.className = 'removeTodo' 
      li.appendChild(span)
      ul.appendChild(li);
      span.addEventListener('click', removeTodo);
      
      
      addText.value = '';
      addText.focus();
      addButton.setAttribute("disabled", true);
    });
    document.body.appendChild(ul);

    function removeTodo(event) {
      console.log (event.target) // this is a span
      console.log (event.target.parentElement) // this is a li
      event.target.parentElement.remove(); // remove li
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <input type="text" name="" id="addText">
  <input type="button" value="Add" id="addButton" disabled>
</body>

</html>

如何获取javascript`this`元素属性？

3 个答案: