點擊（或ng點擊）父母div上的切換類

我有一些可摺疊的面板，我想添加一個調整大小按鈕。爲此，我做了這段JavaScript代碼：點擊（或ng點擊）父母div上的切換類

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>

但它不能正常工作。有時我必須點擊多次，有時候內部圖表不會像div一樣調整大小。（我想要一個適用於所有元素的代碼，而不僅僅是一個，所以我希望使用類而不是id）。

謝謝。

來源

2017-06-27 Júlio César

要麼你不應該用'angularjs'來使用jquery，或者你的qstn標籤應該是'jquery'。 :) – anoop

'我也可以使用angularjs.'你願意爲你的項目引入一個完整的新的依賴關係，只是爲你的面板添加調整大小？我不會這麼倉促，除非你已經使用Angular – Nope

使用此：

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

這樣做是找到每個面板的大小調整按鈕，併爲其分配一個click處理這改變了面板本身。

來源

2017-06-27 15:51:17

這裏是一個小提琴：https://jsfiddle.net/khrismuc/4ney37to/ –

謝謝，它的工作，但我還有一個問題。面板中的畫布填充了圖表，有時不會調整大小。爲什麼？ –

@JúlioCésar我不知道。我需要一個[mcve] –

點擊（或ng點擊）父母div上的切換類

回答

相關問題