jQuery，切换按钮以显示加号或减号

如何切换切换按钮以显示加号还是减号？
按钮放大和缩小文本。如果文本很大...按钮是
减号，如果文本很小...按钮是加号等jQuery，切换按钮以显示加号或减号

我昨天有一些帮助，我仍然试图学习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>

来源

2011-03-04 DisEngaged

下面的代码的的jsfiddle：http://jsfiddle.net/TebyM/ – 2011-03-04 16:53:53

你能不能让你的函数小？喜欢这个？

<!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>

来源

2011-03-04 17:11:39 Mahesh

工程。它更清洁，谢谢。 – DisEngaged 2011-03-04 17:18:33

埃里克的回答再次清洁。 toggle是jQuery中的一个内置函数。 $（）。toggle（function，function）; – Mahesh 2011-03-04 17:28:04

，如果您需要在JS的字体大小某种原因，我却不知道，
但是这将是我对此采取：

CSS：

p.large{ 
    font-size:1.2em; 
} 

input{ 
    padding:0 5px; 
}

JS ：

$(function() { 

    $('input').toggle(
    function() { 
     $(this).val('-'); 
     $('p').addClass('large'); 
    }, function() { 
     $(this).val('+'); 
     $('p').removeClass('large'); 
    }); 

});

http://jsfiddle.net/e4xyF/

来源

2011-03-04 17:20:09 Andy

进一步说一个阶段从mahesh's answer，使用$().toggle(function, function)：

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("+"); 
    }); 
});

来源

2011-03-04 17:21:31 Eric

jQuery，切换按钮以显示加号或减号

回答

相关问题