Javascript jQuery，切换按钮以显示加号或减号
Javascript jQuery，切换按钮以显示加号或减号,javascript,jquery,html,Javascript,Jquery,Html,如何切换按钮以显示加号或减号？该按钮可放大和缩小文本。如果文本较大…按钮为负，如果文本较小…按钮为正等 昨天我在这方面得到了一些帮助，我仍在努力学习jQuery，有点卡住了。 谢谢你的帮助 <!DOCTYPE html PUBLIC "> <head> <script type="text/javascript" src="js/jquery-1.4.min.js"></script> <script type='text/javascrip
如何切换按钮以显示加号或减号？
该按钮可放大和缩小文本。如果文本较大…按钮为负，如果文本较小…按钮为正等 昨天我在这方面得到了一些帮助，我仍在努力学习jQuery，有点卡住了。
谢谢你的帮助
<!DOCTYPE html PUBLIC ">
<head>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type='text/javascript'>
var fontSizes = [14, 16]
$(function(){
$('input').click(function() {
$('p').css('font-size', fontSizes[0] + 'pt');
fontSizes.reverse();
var currFontSize = ourText.css('fontSize');
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == 'large') {
finalNum *= 1.2;
}
else if (this.id == 'small'){
finalNum /=1.2;
}
ourText.css('fontSize', finalNum + stringEnding);
});
});
</script>
</head>
<body>
<h2>Toggle Size? </h2>
<!--TOGGLE BUTTON NEEDS TO CHANGE FROM PLUS TO MINUS-->
<input type='button' value='+' id='small' />
<p>My Text!!!</p>
</body>
</html>
你不能把你的函数保持小吗？像这样
<!DOCTYPE html PUBLIC ">
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type='text/javascript'>
var fontSizes = [14, 16]
$(function(){
$('#PlusMinus').click(function() {
if($(this).val() == "+") {
$('#OurText').css('fontSize', fontSizes[1] + 'pt');
$(this).val("-");
}
else {
$('#OurText').css('fontSize', fontSizes[0]+ 'pt');
$(this).val("+");
}
});
});
</script>
</head>
<body>
<h2>Toggle Size? </h2>
<!--TOGGLE BUTTON NEEDS TO CHANGE FROM PLUS TO MINUS-->
<input type='button' value='+' id='PlusMinus' />
<p id="OurText">My Text!!!</p>
</body>
</html>
你不能把你的函数保持小吗？像这样
<!DOCTYPE html PUBLIC ">
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type='text/javascript'>
var fontSizes = [14, 16]
$(function(){
$('#PlusMinus').click(function() {
if($(this).val() == "+") {
$('#OurText').css('fontSize', fontSizes[1] + 'pt');
$(this).val("-");
}
else {
$('#OurText').css('fontSize', fontSizes[0]+ 'pt');
$(this).val("+");
}
});
});
</script>
</head>
<body>
<h2>Toggle Size? </h2>
<!--TOGGLE BUTTON NEEDS TO CHANGE FROM PLUS TO MINUS-->
<input type='button' value='+' id='PlusMinus' />
<p id="OurText">My Text!!!</p>
</body>
</html>
我不知道您是否出于某种原因需要js中的字体大小，
但这将是我对它的看法：
css:
js:
我不知道你是否出于某种原因需要js中的字体大小，
但这将是我对它的看法：
css:
js:
再往前走一步，使用$（）。切换（函数，函数）
：
再往前走一步，使用$（）。切换（函数，函数）
：
这里有一段JSFIDLE代码：这里有一段JSFIDLE代码：Eric的答案再次更加清晰。toggle是jquery中的内置函数$（）切换（功能，功能）；埃里克的回答又更清楚了。toggle是jquery中的内置函数$（）切换（功能，功能）；
$(function() {
$('input').toggle(
function() {
$(this).val('-');
$('p').addClass('large');
}, function() {
$(this).val('+');
$('p').removeClass('large');
});
});
var fontSizes = [14, 16];
$(function(){
$('#PlusMinus').toggle(function() {
$('#OurText').css('fontSize', fontSizes[1] + 'pt');
$(this).val("-");
}, function() {
$('#OurText').css('fontSize', fontSizes[0] + 'pt');
$(this).val("+");
});
});