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

我一直在学习JavaScript得到明确，这就是为什么我要告诉你使用jQuery的例子，以及如何编写相同的代码与JS如何获取javascript`this`元素属性？

我必须做这样的列表中的jQuery：

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) { 
 
    // 
 
}

<!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>

，当你上段看到我有removeTodo（）函数..我想删除li我点击，但这样做之前，我要问我如何才能获得点击属性（ID，类文本，父母，孩子bla bla）以及我如何删除或添加C.拉斯（例如）？

这是非常简单的，像这样

$(element).on("click", function() { 
 

 
    $(this).attr("id"); 
 
    $(this).text(); 
 
    $(this).remove(); 
 
    $(this).hide(); 
 
    $(this).parents().attr("class"); 
 
})

来源

2017-08-16 ani_css

一些等同物是：'this.id'，'this.textContent'，'this.parentElement.removeChild（本）'，'this.style.display =“none'' ，最后一个需要更多的努力。检查https://youmightnotneedjquery.com – evolutionxbox

此外，'onclick ='removeTodo（）''应该是'onclick ='removeTodo（this）''。还要考虑在JS中添加单击事件而不是作为属性。 – evolutionxbox

@MichaelGeary你似乎错过了一点--OP使用这些jQuery方法作为他如何访问引发事件的元素的例子。 –

随着你使用jQuery的方法 - 在这里你所期望的事件作为参数传递给函数传递 - 你可以使用event.target访问点击元素。请注意，您需要修改onclick以在参数中包含event。

但是，更好的解决方案是在li上使用不显眼的事件处理函数，就像您在代码中的所有其他元素一样。然后，您可以使用this关键字来引用clicked元素，类似于第二个代码块中的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>

来源

2017-08-16 09:09:26

点击整个'li'将其删除。 – evolutionxbox

在这种情况下，您可以在阅读所需属性后调用remove（）。我更新了答案，以显示如何。 –

你好Rory Mcrossan非常感谢你的样本..我写作你的代码，但在我的文档中删除不起作用？ http://jsbin.com/yocijaneda/edit?js,console,output –

你的事件对象都将有一个event.target场，将持有的DOM对象，你正在寻找。

来源

2017-08-16 09:10:22 tomcek112

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>

来源

2017-08-16 09:10:37 qiAlex

请不要在代码中转储代码。它根本无助于教育OP或未来的访问者。 –

请告诉我们你做了什么改变，以及你如何得到OP的请求。 – evolutionxbox

有什么你错了我不想这样做与jquery我只是想做纯JavaScript我试图学习:) –

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

回答

相关问题