Javascript 单击“调整大小”按钮添加和删除类

我有一些可折叠的面板，我想添加一个调整大小按钮。为此，我编写了以下javascript代码：

function myFunction () {
    $(".elementoGrafico").click(function () {
        $(this).toggleClass("col-md-12");
        $(this).toggleClass("col-md-6");
    });
};

html代码是：

<div class="col-md-12 ui-state-default elementoGrafico">
    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading ">
                <h4 class="panel-title">
           <a data-toggle="collapse" href="#collapse1" class="component-button max-min-button more-less glyphicon glyphicon-chevron-up"></a>
                   <a href="#" class="component-button resize-button glyphicon glyphicon-resize-small" onclick="myFunction.call(this)"></a>
                   Gráfico 1
                </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse in elemento"> <canvas class="chart" id="myChart"></canvas>
            </div>
    </div>
    </div>
</div>

格拉菲科1号

但它不起作用。如何让它工作？（我想要一个适用于所有元素的代码，而不仅仅是一个元素，所以我想使用类，而不是id。）

谢谢。

“elemnto1”不是你抓取每节课的方式，你错过了这节课

$（“.elemento1”）.each（）

编辑：

$(".elemento1").click(function() {
    $(this).toggle("col-md-12");
    $(this).toggle("col-md-6");
});

---

您只需执行

$（此操作）。toggleClass（“col-md-6 col-md-12”）

不起作用。我找到了解决方案：$（“.elementoGrafico”）.each（function（）{let panel=this；$（this.find（“.resize button”）.click（function（）{$（panel.toggleClass（“col-md-12”）；$（panel.toggleClass（“col-md-6”）；}）；工作正常，但我只想调整我单击的元素的大小。我认为我的语义学是错误的。它在一次点击中调整到6，然后又回到12。看起来它有时比点击得到的更多。有时单击“不工作”只有当元素已经有一个

col md-

类时，这才有效。如果首先没有指定

col-md-

，它将同时打开

col-md-12

和

col-md-6

。@ReactiveRaven，我认为您的评论是基于对问题的误解。如果查看问题，用户将删除

col md-

中的一个类，并在

If

和

else

子句中添加另一个类，这意味着这些类中至少有一个已经存在于他的HTML中。我是根据这个问题回答的。toggleclass可以工作，但是有些点击被忽略了。有时，我必须多次单击才能使其正常工作。为什么？如果必须单击两次，这意味着在单击之前元素可能没有

col md-

类。你的问题会让人产生相反的想法。如果在单击之前，某些元素没有

col md-

类，请更新您的问题以反映这一点，或者让我知道，以便我更新我的答案。我将更新问题并显示我的代码现在如何

function myFunction () {
    $( "elemento1" ).each(function() {
        $(this).toggleClass("col-md-12");
        $(this).toggleClass("col-md-6");
    });
};