Jquery toggleClass 不切换类

Question

我有一个显示 4 个图像的 div，我正在尝试获取这个 jQuery 函数，这样当我单击图像时，它会切换一个类，使图像尺寸增加。很简单，但我不明白为什么代码没有切换 .exampleimgopen 类。我已将 jquery 脚本和所有这些链接到我的 html

<div id="examples">
    <p>Examples:</p>
    <img src="img/1.png" class="exampleimg">
    <img src="img/2.png" class="exampleimg">
    <img src="img/3.png" class="exampleimg">
    <img src="img/1.png" class="exampleimg">
</div>

此代码的 CSS 是:

#examples {
    background-color:white;
    color:black;
    text-align:center;
    padding:5px 5px 5px 5px;
}

.exampleimg {
    padding:10px 0px 10px 0px;
    width:300px;
    margin:0 20px 0 20px;
}

.exampleimg:hover {
    opacity:0.8;
    cursor:pointer;
}

.exampleimgopen {
    width:600px;
}

为此，jQuery 是:

jQuery(document).ready(function($) {
    $('#examples').click(function() {
        $('.exampleimg').toggleClass('.exampleimgopen');
    });
});

Answer 1

删除toggleClass('.exampleimgopen')中的点

jQuery(document).ready(function($) {
    $('#examples').click(function() {
        $('.exampleimg').toggleClass('exampleimgopen');
    });
});

#examples {
    background-color:white;
    color:black;
    text-align:center;
    padding:5px 5px 5px 5px;
}

.exampleimg {
    padding:10px 0px 10px 0px;
    width:300px;
    margin:0 20px 0 20px;
}

.exampleimg:hover {
    opacity:0.8;
    cursor:pointer;
}

.exampleimgopen {
    width:600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="examples">
    <p>Examples:</p>
    <img src="http://placehold.it/300" class="exampleimg">
    <img src="http://placehold.it/300" class="exampleimg">
    <img src="http://placehold.it/300" class="exampleimg">
    <img src="http://placehold.it/300" class="exampleimg">
</div>

如果你想在每张图片上都这样，就这样做

jQuery(document).ready(function($) {
    $('.exampleimg').click(function() {
        $(this).toggleClass('exampleimgopen');
    });
});

#examples {
    background-color:white;
    color:black;
    text-align:center;
    padding:5px 5px 5px 5px;
}

.exampleimg {
    padding:10px 0px 10px 0px;
    width:300px;
    margin:0 20px 0 20px;
}

.exampleimg:hover {
    opacity:0.8;
    cursor:pointer;
}

.exampleimgopen {
    width:600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="examples">
    <p>Examples:</p>
    <img src="http://placehold.it/300" class="exampleimg">
    <img src="http://placehold.it/300" class="exampleimg">
    <img src="http://placehold.it/300" class="exampleimg">
    <img src="http://placehold.it/300" class="exampleimg">
</div>