函数内的 JavaScript if 语句运行另一个函数

Question

我正在尝试将功能附加到现有按钮中。该按钮目前正在使用 jQuery 切换功能。我想要做的是:当按钮处于事件状态时(用户单击按钮一次)，显示图形，当按钮处于非事件状态时(用户再次单击按钮)，图形应该消失。

我写的代码如下(js fiddle 在这里 http://jsfiddle.net/w5h6rffo/7/

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<button type="button" class="btn" onclick="graphX();">Details</button>
<div id="container" style="height: 400px; min-width: 310px"></div>

CSS

 .btn.active, .btn:active {
        background: #000000;
        text-decoration: none;
    }

JavaScript/jQuery

$('.btn').click(function() {
    $(this).toggleClass('active');
});

$(function graphX() {
  var data = [];
  for(var i = 0; i < 899; i++) {
    data[i] = {X: i};
  }

  var processedData = [];
  Highcharts.each(data, function (d) {
    processedData.push(Math.sin(d.X));
  });

  // Create the chart
  $('#container').highcharts('StockChart', {
    rangeSelector: {
      selected: 1
    },

    series: [{
      data: processedData,
      pointStart: Date.UTC(2010, 1, 1),
    }],

  });
});

我如何在 jQuery 按钮切换函数中实现 if 语句，以便在按钮处于事件状态时启动并显示 graphX，并在按钮处于非事件状态时使 graphX 消失？

我一直在尝试这样写

$('.btn').click(function() {
    if (.btn.active = false){
    container.visibility = visible;
    $(this).toggleClass('active');
    } else {
    container.visibility = hidden;
});

这是 jsfiddle http://jsfiddle.net/w5h6rffo/7/

Answer 1

你可以这样做:

$('.btn').click(function() {
    $(this).toggleClass('active');
    if($(this).hasClass('active')){
        $("#container").hide();
    }else{
        $("#container").show();
    }
});

here's a fiddle .