Question

我刚开始学习编码所以这可能是一个愚蠢的问题。我试图这样做，当你按下一个按钮（图像）时，它改变它所在的div的css，而不影响整个类，只有属于那个按钮所在的类的div。我是尝试这样做而不必使用ID，以使代码更灵活。

这是我到目前为止所做的，除了你需要点击div本身来改变它的css之外，它的效果很好。这似乎不是很直观，所以我试图让你必须按下div左上角的按钮，div的css被改变了。我的第一个猜测是这样的：

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

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

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

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

Answer 1

jQuery中没有:parent选择器，您正在寻找 .parent() ：

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

请注意，您可以使用提供多个类来切换.toggleClass()内部，并且您可以直接从jsFiddle添加jQuery，方法是从Frameworks & Extensions标签中选择jQuery版本。< / p>

<强> Updated Fiddle

Answer 2

:anything代表一个伪选择器，例如:checked。但是jquery中没有:parent伪选择器。

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

您需要调用.parent（）来获取largeDiv

按钮单击影响父级，但不是整个类

2 个答案: