个人中心
gpt4 book ai didi

javascript - 使用 javascript 和 jquery 的
  • 标签的绿色

    • 转载 作者：行者123 更新时间：2023-12-01 02:05:17 25 4
    gpt4 key购买 nike

    我的书展示了 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 但尚未解决。我发现括号写得很糟糕，脚本的姿势很尴尬。

    最佳答案

    对于 javascript 版本，

    1. 将()放在function之后，否则会出现语法错误。
    2. 使用 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 版本，

    1. 您不需要将this传递给点击处理程序
    2. 使用 $(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>

    关于javascript - 使用 javascript 和 jquery 的 <li> 标签的绿色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30665659/

    25 4 0
    文章推荐： Ckan 信息级别日志转到错误日志文件
    文章推荐： javascript - 如何使用jquery禁用小于某个值的下拉选项
    文章推荐： javascript - 从缓存中清除 JavaScript 代码
    文章推荐： python - 导入模块的开发版本而不是站 pip 包中安装的版本