Question

我试图让每个不同的按钮启动不同的功能（图形）效果。我有3个按钮，它们都应该是独占的，如果按下按钮1，按钮2和3应该被禁用并且它的相应功能

如果按下按钮1，则功能1应该点亮，2＆amp; 3不应该如果按下按钮2，则功能2应该点亮并且1＆amp; 3不应该如果按下按钮3，则功能3应该点亮并且1＆amp; 2不应该

在这个例子中，按下按钮1应绘制点数为14,10,11的图形，按钮2应绘制26,31,28，按钮3应绘制52,48,38

这是一个jsfiddle http://jsfiddle.net/sctcmr1h/6/

HTML

  <button type="button" class="btn" id="button1" >Button 1</button>
  <button type="button" class="btn" id="button2">Button 2</button>
  <button type="button" class="btn" id="button3">Button 3</button>

  <div id="container"></div>

CSS

.btn.active, .btn:active {
    background: #124364;
    text-decoration: none;
}
#container{
  width: 400px;
  height: 100%;
  background-color: #336699;
  color: white;
}

的JavaScript

$(function button1() {
  var data = [{
    X: 14
  }, {
    X: 10
  }, {
    X: 11
  }];

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

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

    series: [{
      data: processedData,
    }],

  });
});

$(function button2() {
  var data = [{
    X: 26
  }, {
    X: 31
  }, {
    X: 28
  }];

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

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

    series: [{
      data: processedData,
    }],

  });
});

$(function button3() {
  var data = [{
    X: 52
  }, {
    X: 48
  }, {
    X: 38
  }];

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

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

    series: [{
      data: processedData,
    }],

  });
});

http://jsfiddle.net/sctcmr1h/6/

我想写作的方式就是沿着这条路走的路，但我不认为这是制作3个按钮的准确方法

$(document).ready(function() {
$('#Button ID').click(function 1 2 or 3() {
if ($(this).hasClass('active')) {

  $('#container').hide();
} else {
  $('#container').show();
  function 1 2 or 3();
}
$(this).toggleClass('active');

});

Answer 1

我没有安装highcharts，但我可以告诉你我将如何完成剩下的工作：

var data = [
    [{ X: 14 }, { X: 10 }, { X: 11 }],
    [{ X: 26 }, { X: 31 }, { X: 28 }],
    [{ X: 52 }, { X: 48 }, { X: 38 }],
  ],
  displyChart = function(i){
    var processedData = data[i].map(function(point){
       return point.X;
    });
    $('#container').highcharts('StockChart', {
      rangeSelector: {
        selected: 1
      },
      series: [{
        data: processedData,
      }],
    });
  };
$('.btn-chart').click(function() {
  $('.btn').not(this).removeClass('active');
  $(this).toggleClass('active');
  displyChart($(this).attr('data-chart'));
});

这是一个jsfiddle：

http://jsfiddle.net/mckinleymedia/sctcmr1h/7/

我不确定你为什么要隐藏并显示“#container”，所以我把它关了。

哦，我也摆脱了按钮中的ID。我通常会尝试在可能的情况下删除id声明。我添加了一个“数据图表”属性，以及一个更具体的类：

  <button type="button" class="btn btn-chart" data-chart="0">Details</button>
  <button type="button" class="btn btn-chart" data-chart="1">Details</button>
  <button type="button" class="btn btn-chart" data-chart="2">Details</button>

  <div id="container"></div>

我希望这会有所帮助。

如何使用jQuery实现独占切换按钮？

1 个答案: