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

Question

I am trying to attach a function into an existing button. The button is currently using the jQuery toggle function as of now. What I want to do is the following: When the button is active (user clicks on the button once), show the graph and when the button is inactive (user clicks on the button again), the graph should disappear.

The code I have written is the following (js fiddle is here 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),
    }],

  });
});

How can I implement the if statement within the jQuery button toggle function so that the graphX is initiated and displayed when the button is active and the graphX to disappear when the button is inactive?

I've been trying to write it in this way

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

Here is the jsfiddle http://jsfiddle.net/w5h6rffo/7/

Answer 1

You could do something like this:

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

here's a fiddle .

Answer 2

Check if it has the class, toggle its visibility based on the result and then finally toggle the class.

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

Answer 3

The graph method is any anonymous scope & hence, cannot be called to reload. If you do not wish to reload, only hide & show then you can use jQuery hide/show.

For reload of GraphX:

Wrap the entire graphX + click method in $(document).ready function, this will allow to associate reload of graphX based 'active' without making it public. Please see below:

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

Another option: start with the container hidden. When the button is clicked, toggle a class on it to show it.

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

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