[英]Green color of a <li> tag using javascript and jquery
我的書顯示了javascript和jquery之間的區別，但兩個腳本均無效。 我可以看到兩個作品嗎？
<!DOCTYPE html>
<html>
<head>
<style type="text/css" src="myCss.css"></style>
<script>
(function(document){
document.onload = function(){
content.style.display = "block";
}
var listItems = document.getElementsByTagName("li");
for(i = 0; i < listItems.length; i++){
listItems[i].onclick = function{
listItems[i].style.backgroundColor = "green";
}
}
})( document );
</script>
</head>
<body>
<ul id="content" class="contentClass">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css" src="myCss.css"></style>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$( "#content" ).show();
$( "li" ).click(function(this){
this.css( "backgroundColor","green" );
});
});
</script>
</head>
<body>
<ul id="content" class="contentClass">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</body>
</html>
我試圖對兩者都做modicfiche，但我還沒有解決。 我發現括號的顯示方式很糟糕，腳本的位置很尷尬。
jQuery，嘗試：
$("li").on('click', function(){
$(this).css("backgroundColor", "green");
});
本機js：
for(i = 0; i < listItems.length; i++){
listItems[i].onclick = function{
this.style.backgroundColor = "green";
}
}
對於javascript版本，
()放在function或其語法錯誤之后。 this而不是listItems[i].style因為那樣您必須正確地進行閉包以傳遞i ，這是更復雜的路由。 點擊處理程序中的this將引用被點擊的li本身 (function(document){ document.onload = function(){ content.style.display = "block"; } var listItems = document.getElementsByTagName("li"); for(i = 0; i < listItems.length; i++){ listItems[i].onclick = function(){ this.style.backgroundColor = "green"; } } })( document );
<ul id="content" class="contentClass"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul>
對於jQuery版本，
this傳遞給點擊處理程序 $(this)代替this因為您正在調用jQuery函數css()並需要jQuery對象（ $（this） ） $(document).ready(function(){ $( "#content" ).show(); $( "li" ).click(function(){ $(this).css( "background-color","green" ); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <ul id="content" class="contentClass"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul>
采用
$("li").click(function() {
$(this).css("background-color", "green");
});
嘗試這個：
$(this).css("background-color", "green");
如何通過 Javascript 或 Jquery 為 ul 標簽的 li 標簽着色？
[英]How to color text a li tag of the ul tag by Javascript or Jquery?
如何改變顏色 <li> 懸停元素使用javascript或jquery？
[英]how to change color of <li> elements on hover using javascript or jquery?
顯示所有孩子 <ui> 和 <li> 在一個 <li> 使用jQuery標簽
[英]Show all child <ui> and <li> within an <li> tag using jquery
li 標簽未使用 javascript 使用 socketio 生成值
[英]li tag is not generating values with socketio using javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.