如何使用jQuery實現獨佔切換按鈕？

Question

我想讓每個不同的按鈕啓動不同的功能（圖形）效果。我有3個按鈕，它們都應該是獨一無二的，如果按下按鈕1，則按鈕2和按鈕3應該被禁用並且其相應功能按下按鈕1時，功能1應該被觸發並且應該2應當不 如果按鈕2被按下時，功能2應觸發和1 & 3不應 如果按鈕3被按下時，功能3應觸發和1 & 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/

我想寫作的方式就是沿着這條線的東西，但我不認爲這是使獨家

$(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 3個按鈕的準確方式安裝，但我可以告訴你，我怎麼會做它的其餘部分：

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> 

我希望這有助於。