Question

我是jQuery的新手。我正在尝试使用一个jQuery命令来影响同一类的多个div：

HTML：

<div class="textbox">hi</div>
<div class="textbox">hi</div>
<div class="textbox">hi</div>

JS：

$('.textbox').focus(function(){
$('.textbox').addClass('newstyle');
});

不幸的是，JS代码在同一时间使用“文本框”类影响所有三个div。我想要的是让每个文本框单独做出反应。

我在做什么错了？

Answer 1

会是这样

$('.textbox').focus(function(){
    $(this).addClass('newstyle');
});

或者您也可以将元素存储在变量中

$('.textbox').focus(function(){
   var element =  this;
   $(element).addClass('newstyle');
});

Answer 2

您正确使用了focus，但是需要告诉jquery将类仅添加到focus下的元素中，而不是添加所有与该类匹配的元素。

我通过使用$(this)更正了您的代码，该代码告诉jquery只是对所涉及的元素进行操作。

我还为focusout添加了一些jquery，因此当您不再专注于给定的文本框时，该类将被删除。

我已将您的div切换为input，以使示例具有交互性，但是该代码在两种情况下均适用。

$('.textbox').focus(function(){
  $(this).addClass('newstyle');
});

$('.textbox').focusout(function(){
  $(this).removeClass('newstyle');
});

.newstyle {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="textbox" value="one">
<input class="textbox" value="two">
<input class="textbox" value="three">

Answer 3

那是因为在您的focus函数中，您将通过类名来定位所有div。解决方法是this：

$('.textbox').focus(function(){
    $(this).addClass('newstyle');
});

Answer 4

$(document).ready(function(){
$('.textbox').focus(function(){
$(this).addClass('newstyle');
});
});

一个jQuery命令用于相同类的多个div

4 个答案: