点击（或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上的切换类

回答

相关问题