Question

$(document).ready(function(){


 $("div").focusin(function(){
        $(this).attr('class', 'focusedin');
    });

 $("div").focusout(function(){
        $(this).attr('class', 'focusedout');
    });
});

<!DOCTYPE html>
<html>
<head>
   <style>
  .focusedin {
    background: green;
  }
  .focusedout {
    background: blue;
  }
  </style>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 <div>
 First name: <input type="text"><br>
 Last name: <input type="text">
</div>
</body>
</html>

我正在尝试学习如何在聚焦和聚焦时给输入元素赋予不同的背景，但是我意识到使用其中的三个将产生不同的效果，我理解toggleclass和addclass之间的区别，但我不确定为什么在attr（）工作时它们都无法正常工作。

    <div>  
     First name: <input type="text"><br>  
     Last name: <input type="text">  
    </div>    



//jQuery used initially and didn't work


      $("div").focusin(function(){
          $(this).toggleClass("focusedin");
      });

      $("div").focusout(function(){
          $(this).toggleClass("focusedout");
      });

    }); 


//second jquery that worked


$(document).ready(function(){
$("div").focusin(function(){  
        $(this).attr('class', 'focusedin');  
    });  

 $("div").focusout(function(){  
        $(this).attr('class', 'focusedout');  
    });

}）;

Answer 1

toggleClass切换课程。因此，当您提供的课程已经存在时，它将被删除，反之亦然。

addClass只是为元素添加了一个额外的类。如果该类已经存在，则不会再次添加。该函数的对应部分是removeClass

attr只是设置（或获取）属性。因此，如果您使用它来设置类属性，它将覆盖已存在的任何类。在你的情况下使用这个可能不是一个好主意。

在您的代码中，您忘记删除旧状态。所以你有两个选择：

  $("div").focusin(function(){
      $(this).toggleClass("focusedin focusedout");
  });

  $("div").focusout(function(){
      $(this).toggleClass("focusedout focusedin");
  });

这假设您的“focusout”类已存在于初始html中。一个替代方案是：

  $("div").focusin(function(){
      $(this).addClass("focusedin")
             .removeClassClass("focusedout");
  });

  $("div").focusout(function(){
      $(this).addClass("focusedout")
             .removeClassClass("focusedin");
  });

这对初始标记没有任何假设。我也相信从代码中可以清楚地看到它究竟是什么。但它有点长。

在jQuery中toggleClass（“class”），attr（“class”，class）和addClass有什么区别？

1 个答案: