使用 javascript 和 jquery 的 <li> 标记的绿色答案

【问题标题】：Green color of a <li> tag using javascript and jquery使用 javascript 和 jquery 的 <li> 标记的绿色
【发布时间】：2015-08-20 08:27:49
【问题描述】：

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

我尝试对两者进行修改，但我没有解决。我发现括号不好，脚本的姿势很尴尬。

【问题讨论】：

@captainsac - backgroundColor 是用于 css 属性 background-color 的 javascript。
@Jamiec 你是对的，但这怎么能行得通jsfiddle.net/Lv5cn8xy/57？
@AnoopJoshi - 因为 jQuery 很好/很有帮助，并且会接受我假设的 css 名称或 javascript 名称。
如果所有答案都无效或您仍需要帮助，请告诉我

标签： javascript jquery

【解决方案1】：

对于 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>

【讨论】：

我不知道，我赞成，因为这完全符合 OP 的要求 - 两个版本的比较。
那么 $(this).addClass("green-background");

【解决方案2】：

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

【讨论】：

【解决方案3】：

使用

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

【讨论】：

@Jamiec op 的代码创建控制台错误。我刚刚更正了那个代码。
我会引用它，您似乎无法理解 我的书显示了 javascript 和 jquery 之间的区别，但两个脚本都不起作用。我可以看看这两个工作吗
@Jamiec 至少这提供了一个 jquery 解决方案。

【解决方案4】：

试试这个：

$(this).css("background-color", "green");

【讨论】：

您已提出另一个问题作为答案。你的意思是写评论吗？此外，OP 要求提供 2 个版本（vanilla js 和 jQuery），您只放置了一行 jQuery，没有任何关于它应该去哪里或如何使用它的上下文。这是一个糟糕的答案。
同意，但您对 valnilla 的看法是什么？