Question

我对jQuery几乎不熟悉，而且我无法在点击时将图片放大到100％的大小。我已经多次查看过一小段代码，看起来应该是这样的。这是jQuery：

$(document).ready(function() {
    $('img.gallery').click(function() {
        $(this).toggleClass('enlarge');
    });
});

CSS：

    img.gallery {
        border: 1px solid #aaaaaa;
        width: 260px;
        height: 260px;
    }

    .enlarge {
        width: auto;
    }

我是否正确链接到库和脚本？

    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript" src="gallery.js"></script>

上面没有上述代码段的完整CSS就在这里：http://ruzzio.net/style.css

我想知道CSS中的某些内容是否会阻止图像在点击时放大（假设我的jQuery是准确的）。

先谢谢你们的帮助。这是我第一次使用这个网站，如果我忘记了一些关键信息，我道歉。

Answer 1

img.gallery具有比.enlarge更高的特异性（0011与0010），因此它将被认为更重要。

尝试删除img标记名称。 CSS选择器应该尽可能简单。

Answer 2

如果您不确定CSS中设置的正确宽度，为什么不尝试以下内容：

.enlarge {
        width: auto;
        border: 1px solid red;
    }

你会看到切换是否正常; - ）

Answer 3

因为auto不会让它的规模增长。简单地说，auto值会自动计算和设置元素的大小，而不是将其扩展到容器。假设您的图像位于容器内，请尝试：

   img.gallery {
        border: 1px solid #aaaaaa;
        width: 260px;
        height: 260px;
    }

    .gallery.enlarge {
        width: 100%;
        height: auto;
    }

在此处查看此行动：http://jsfiddle.net/gfW3g/1/

编辑：添加了示例并修复了css的特异性

为什么我的jQuery toggleClass不起作用？

3 个答案: