Question

当我点击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>

这是我的CSS：

.box {
    background-color: #a01414;
    width: 300px;
    height: 300px;
    float: left;
    margin-left: 20px;
}
.vakkie {
    display: none;
    background-color: #00cbff;
    width: 300px;
    height: 100px;
    position: relative;
    top: 200px;
}

jQuery的：

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

Answer 1

这三个都在变化，因为您正在使用$('.vakkie') querySelector，它将返回所有带有'vakkie'类的元素。您应该选择当前框的“.vakkie”，您可以使用this关键字执行此操作。

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

Answer 2

使用$(this) - 引用被点击的jQuery对象：

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

在您的情况下，$(".vakkie")会定位所有具有.vakkie类的元素，从而影响所有元素。 this指的是单击的HTMLObject，当包含在$()中时，它成为jQuery对象。但是，正如RUJordan指出的那样，使用this.style.display = "block"/"none"，因为它使用相同长度的代码完全相同，并且速度更快。

Answer 3

使用$（this）.find（）

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

Answer 4

你期待这样吗？每个框都单击，相应的div应显示？

http://fiddle.jshell.net/N5BYk/11/

一次仅影响One Div - 不工作

4 个答案: