クリック時に親divのクラスを切り替える（またはng-click）

Question

折りたたみパネルがあり、サイズ変更ボタンを追加したいと思います。このために私はこのJavaScriptコードを作りました：

<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> 

しかし、それは正しく動作しません：

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

htmlコードです。時々私は複数の時間をクリックしなければならないし、内部のグラフはdivのようにサイズ変更しないことがあります。 （私は、すべての要素で動作するコードを1つではなく、私はクラスではなく、idを使ってやりたがります）

私はangularjも使用できます。

ありがとうございます。

Answer 1

使用この：これは何

$(".elementoGrafico").each(function() { 
    let panel = this; 
    $(this).find(".resize-button").click(function() { 
    $(panel).toggleClass("col-md-12"); 
    $(panel).toggleClass("col-md-6"); 
    }); 
}); 

は、各パネルのサイズ変更ボタンを見つけて、それをパネル自体を変更するクリックハンドラを割り当てることです。