Javascript 一次只影响一个Div-不工作

当我点击一个div时，三个div都会改变。我只想更改我单击的div。 我有这个HTML：

<div class="box">
    <div class="vakkie">fkhakdhfkadh</div>
</div>
<div class="box">
    <div class="vakkie">97309471094709</div>
</div>
<div class="box">
    <div class="vakkie">****&&^%%%&%&$^$</div>
</div>

jQuery：

$('.box').toggle(
    function() {
        $('.vakkie').css('display', 'block');
    }, 
    function() {
        $('.vakkie').css('display', 'none');
    }
);

---

这三个都在改变，因为您使用的是

$（'.vakkie'）

querySelector，它返回类为'vakkie'的所有元素。您应该选择当前框中的“.vakkie”，您可以使用

this

关键字来执行此操作

$('.box').toggle(function() {
    $(this).find('.vakkie').css('display', 'block');
}, function() {
   $(this).find('.vakkie').css('display', 'none');
});

使用

$（this）

-这是指单击的jQuery对象：

$('.box').toggle(function() {
    $(this).css('display', 'block'); // or $(this).show()
}, function() {
    $(this).css('display', 'none'); // or $(this).hide()
});

在您的例子中，

$（“.vakkie”）

以具有

.vakkie

类的所有元素为目标，从而影响所有元素

此

引用单击的HTMLObject，当包装在

$（）

中时，它将成为jQuery对象。 不过，正如RUJordan指出的那样，使用

this.style.display=“block”/“none”

，因为它使用相同长度的代码做完全相同的事情，而且速度更快。

使用$（this）。find（）

---

你希望这样吗。每单击一个框，对应的div是否应显示

---

this.style.display=“block”/“none”

也可以使用。在使用jQuery时，应该尽量少用，因为原生JS速度更快，而且在大多数情况下，编写起来也一样简单。@RUJordan我同意你的看法。你们帮我解决问题的速度真快，真是太惊人了。谢谢这是适合我的代码

$('.box').toggle(function() {
    $(this).css('display', 'block'); // or $(this).show()
}, function() {
    $(this).css('display', 'none'); // or $(this).hide()
});

$('.box').toggle(function() {
$(this).find('.vakkie').css('display', 'block');
}, function() {
$(this).find('.vakkie').css('display', 'none');
});