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>

Answer 2

这将仅针对单击的图像切换类。试试这个：

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