如何獲取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`元素屬性？

回答

相關問題