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

Question

我正在尝试将功能附加到现有按钮中。 到目前为止，该按钮当前正在使用jQuery切换功能。 我要执行的操作如下：当按钮处于活动状态（用户单击一次按钮）时，显示图形；当按钮处于非活动状态（用户再次单击按钮）时，图形应该消失。

我写的代码如下（js小提琴在这里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();
    }
});

这是一个小提琴 。

Answer 2

检查它是否具有该类，根据结果切换其可见性，然后最终切换该类。

$('.btn').click(function() {
    var active = $(this).hasClass('active');
    $('#container').toggle(active);
    $(this).toggleClass('active');
});

Answer 3

graph方法是任何匿名作用域，因此无法调用以重新加载。 如果您不希望重新加载，仅隐藏并显示，则可以使用jQuery隐藏/显示。

要重新加载GraphX：

将整个graphX + click方法包装在$（document）.ready函数中，这将允许在不公开的情况下关联基于graphX的“活动”的重载。 请看下面：

http://jsfiddle.net/w5h6rffo/21/

$(document).ready(function() {
$('.btn').click(function() {
if ($(this).hasClass('active')) {

  $('#container').show();
  graphX();
} else {
  $('#container').hide();
}
$(this).toggleClass('active');

});

var graphX = function graphX() {
console.log('reload 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),
  }],

});
};
  graphX();
});

Answer 4

另一个选择：从隐藏容器开始。 单击该按钮时，在其上切换一个类以显示它。

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

#container {
  display: none;
}
#container.active {
  display: block;
}