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

Answer 2

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

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

Answer 3

图表方法是任何匿名范围＆amp;因此，无法调用重新加载。如果您不想重新加载，只能隐藏＆amp;然后你可以使用jQuery hide / show。

重新加载GraphX：

在$（document）.ready函数中包装整个graphX + click方法，这将允许基于'active'关联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;
}

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

4 个答案: