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语句在函数内运行另一个函数

回答

相关问题