a<；李>；使用javascript和jquery标记_Javascript_Jquery

a<；李>；使用javascript和jquery标记

javascript jquery

a<；李>；使用javascript和jquery标记,javascript,jquery,Javascript,Jquery,我的书展示了javascript和jquery之间的区别，但这两种脚本都不起作用。我能看到这两个工作吗 <!DOCTYPE html> <html> <head> <style type="text/css" src="myCss.css"></style> <script> (function(document){ document.onload = function()

我的书展示了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>


（职能（文件）{
document.onload=函数（）{
content.style.display=“block”；
}
var listItems=document.getElementsByTagName（“li”）；
对于（i=0；i
项目1
项目2
项目3
项目4

$（文档）.ready（函数（）{
$（“#内容”）.show（）；
$（“li”）。单击（此功能）{
css（“背景色”、“绿色”）；
});
});

项目1
项目2
项目3
项目4

我试图对这两个问题进行修改，但都没有解决。我发现括号很糟糕，脚本的姿势很笨拙。

使用

$("li").click(function() {
    $(this).css("background-color", "green");
});

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";  
    }                           
}

for（i=0；i

试试这个：
$(this).css("background-color", "green");

对于javascript版本
将（）
放在函数
之后，否则会出现语法错误

使用this
而不是listItems[i].style
，因为这样您就必须正确地完成一个闭包才能传入i
，而这是更复杂的路径<代码>单击处理程序中的此

将引用单击的

li

本身

（功能（文档）{
document.onload=函数（）{
content.style.display=“block”；
}
var listItems=document.getElementsByTagName（“li”）；
对于（i=0；i

项目1
项目2
项目3
项目4
@captainsac-backgroundColor
是用于css属性backgroundColor
@Jamiec的javascript。你是对的，但是这怎么行呢？@AnoopJoshi-因为jQuery很好/很有用，并且会接受css名称或我假设的javascript名称。如果答案都不起作用或者您仍然需要帮助，请告诉我。我不知道，我投了更高的票，因为这正是OP要求的-两个版本的比较。那么$（this.addClass（“绿色背景”）呢；你又问了一个问题作为答案。你想写评论吗？此外，OP要求提供两个版本（vanilla js和jQuery），您只需要放置一行jQuery，没有任何关于它应该去哪里或如何使用它的上下文。这是一个糟糕的答案。同意，但你对瓦尼拉说的是什么？@Jamiec op的代码产生了控制台错误。我刚刚更正了代码。我将引用它，您似乎很难理解我的书中显示的javascript和jquery之间的差异，但这两个脚本都不起作用。我能两个都看吗work@Jamiec这至少提供了jquery解决方案。