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

我正在尝试将一个函数附加到现有按钮中。该按钮目前正在使用jQuery切换功能。 我想做的是：当按钮处于活动状态时（用户单击按钮一次），显示图形，当按钮处于非活动状态时（用户再次单击按钮），图形应该消失

我写的代码如下（js fiddle在这里

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>

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),
    }],

  });
});

---

这是jsfiddle

您可以这样做：

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

---

.

您可以这样做：

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

---

.

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

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

---

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

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

---

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

对于GraphX的重新加载：

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

$（文档）.ready（函数（）{
$（'.btn'）。单击（函数（）{
if（$（this）.hasClass（'active'））{
$（“#容器”）.show（）；
graphX（）；
}否则{
$（“#容器”）.hide（）；
}
$（this.toggleClass（'active'）；
});
var graphX=函数graphX（）{
console.log（'reload graphX'）
var数据=[]；
对于（变量i=0；i<899；i++）{
数据[i]={
X:我
};
}
var processedData=[]；
高图。每个（数据、功能（d）{
processedData.push（Math.sin（d.X））；
});
//创建图表
$（“#容器”）.highcharts（'StockChart'{
范围选择器：{
选定：1
},
系列：[{
数据：已处理数据，
pointStart:Date.UTC（2010年1月1日），
}],
});
};
graphX（）；
});

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

对于GraphX的重新加载：

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

$（文档）.ready（函数（）{
$（'.btn'）。单击（函数（）{
if（$（this）.hasClass（'active'））{
$（“#容器”）.show（）；
graphX（）；
}否则{
$（“#容器”）.hide（）；
}
$（this.toggleClass（'active'）；
});
var graphX=函数graphX（）{
console.log（'reload graphX'）
var数据=[]；
对于（变量i=0；i<899；i++）{
数据[i]={
X:我
};
}
var processedData=[]；
高图。每个（数据、功能（d）{
processedData.push（Math.sin（d.X））；
});
//创建图表
$（“#容器”）.highcharts（'StockChart'{
范围选择器：{
选定：1
},
系列：[{
数据：已处理数据，
pointStart:Date.UTC（2010年1月1日），
}],
});
};
graphX（）；
});

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

$（'.btn'）。单击（函数（）{
$（this.toggleClass（'active'）；
$（'#container'）。toggleClass（'active'）；
});

#容器{
显示：无；
}
#容器。活动{
显示：块；
}

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

$（'.btn'）。单击（函数（）{
$（this.toggleClass（'active'）；
$（'#container'）。toggleClass（'active'）；
});

#容器{
显示：无；
}
#容器。活动{
显示：块；
}

调用函数检查hasClass在设置后是否处于“活动”状态，如果没有隐藏它是否为“显示图形”

if（$（“#元素”）.hasClass（“活动”）{/*show graph*/}否则{/*hide它*/}

调用函数检查hasClass在设置后是否处于“活动”状态，如果没有隐藏它是否为“显示图形”

if（$（“#元素”）.hasClass（'active'）{/*show graph*/}else{/*hide it*/}

我遇到了一个问题，第一次单击按钮（激活）没有采取行动，而第二次单击（停用）显示了图形。我遇到了一个问题，第一次单击按钮（激活）没有采取行动，而是第二次单击（停用）显示第一次单击按钮（停用）未采取行动的图形遇到问题，而第二次单击（停用）显示第一次单击按钮（停用）未采取行动的图形遇到问题，而第二次单击（停用）显示图形遇到问题的图形显示图形如果遇到问题，第一次单击按钮（激活）不会显示图形，而是第二次单击（停用）如果在隐藏和显示之前显示将按钮类更改为“btn活动”和移动切换类，则显示图形默认值。我遇到了一个问题，第一次单击按钮（激活）不会显示图形，而是第二次单击（停用）显示图形默认值（如果它应该显示），在隐藏和显示之前将按钮类更改为“btn活动”&移动切换类

$(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();
});