Jquery 按钮单击会影响父类，但不会影响整个类

我刚开始学习编码，所以这可能是个愚蠢的问题。我试图这样做，当你按下一个buttonimage时，它会改变它所在的div的css，而不会影响整个类，只会改变按钮所在的那个类的div。为了使代码更加灵活，我尝试在不使用ID的情况下执行此操作

JSFiddle：

这就是我到目前为止所做的，除了需要单击div本身来更改其css之外，它工作得非常好。这看起来不是很直观，所以我试着让你必须按下div左上角的按钮，div的css就改变了。我的第一个猜测是这样的：

$(".box").click(function() {
    $(this).toggleClass("largeDiv").toggleClass("smallDiv");
});

$(".box").click(function() {
    $(this:parent).toggleClass("largeDiv").toggleClass("smallDiv");
});

显然，这不起作用，因为它会切换长方体的类。我的第二个猜测是更改它，以便在单击按钮时，它会影响按钮的父级，如下所示：

$(".box").click(function() {
    $(this).toggleClass("largeDiv").toggleClass("smallDiv");
});

$(".box").click(function() {
    $(this:parent).toggleClass("largeDiv").toggleClass("smallDiv");
});

虽然这不起作用，但我不知道为什么。

jQuery中没有：父选择器，您正在寻找：

请注意，您可以使用提供多个类来在.toggleClass内进行切换，还可以通过从Frameworks&Extensions选项卡选择jQuery版本，直接从JSFIDLE中包含jQuery

：表示伪选择器的任何内容，例如：选中。但是jquery中没有：parent伪选择器

$(document).ready(function() {  
    $(".box").click(function() {
        $(this).parent().toggleClass("largeDiv").toggleClass("smallDiv");
    });
});

你需要打电话给家长才能拿到大号的