JavaScript if語句在函數內運行另一個函數

我想將一個函數附加到現有的按鈕中。該按鈕目前正在使用jQuery切換功能。我想要做的事情如下：當按鈕處於活動狀態時（用戶單擊按鈕一次），顯示圖形，當按鈕處於非活動狀態時（用戶再次單擊按鈕），圖形應該消失。JavaScript if語句在函數內運行另一個函數

我寫的代碼如下（JS提琴在這裏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/

來源

2015-12-09 axchink

調用一個函數設置它後，檢查hasClass（「主動」），如果它是展示圖如果不是隱藏它'如果（$（「＃元素」）。hasClass（'active'））{/ * show graph * /} else {/ * hide it * /}' – futureweb

你可以做這樣的事情：

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

here's a fiddle。

來源

2015-12-09 21:03:20

我遇到了一個問題，第一次點擊按鈕（激活）沒有采取行動，而是，第二次點擊（取消激活）顯示圖形 – axchink

檢查它是否有類，根據結果切換其可見性，然後切換類。

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

來源

2015-12-09 21:10:13

我遇到了第一次點擊按鈕（激活）時沒有采取動作的問題，而是第二次單擊（取消激活）顯示圖形 – axchink

該圖的方法是任何匿名範圍&因此，不能稱之爲重新加載。如果你不想重新加載，只隱藏&顯示然後你可以使用jQuery隱藏/顯示。

對於GraphX的重裝：

包住整個graphX +單擊$（document）.ready函數方法，這將使基於「主動」沒有使它公共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(); 
});

來源

2015-12-09 21:14:13 goeldeepika3

我遇到了第一次點擊按鈕（激活）不會顯示圖形，而是第二次單擊（取消激活）顯示圖形 – axchink

默認情況下，如果它應該顯示將按鈕類更改爲'btn active'並在隱藏之前移動toggleClass ＆show http://jsfiddle.net/w5h6rffo/27/ – goeldeepika3

另一種選擇：先從容器隱患。點擊按鈕後，切換一個班級來顯示它。

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

來源

2015-12-11 03:22:55 Will

JavaScript if語句在函數內運行另一個函數

回答

相關問題