jQuery用单个按钮切换文本

时间：2011-03-03 20:00:10

标签： jquery html

如何使用单个按钮切换文字大小？ 在14pt和16pt之间切换会很酷。
谢谢

示例'两个按钮无切换'

<!DOCTYPE html PUBLIC ">
<head>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type='text/javascript'>
$(function(){
$('input').click(function(){
var ourText = $('p');
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 Text jQuery Single Button? </h2>

<!--NEED A SINGLE BUTTON TOGGLE-->
<input type='button' value='< text small' id='small' />
<input type='button' value='text large>' id='large' />

<p>My Text!!!</p>
</body>
</html>

3 个答案:

答案 0 :(得分：5)

  var fontSizes = [14, 16];
  $('input').click(function() {
    $('p').css('font-size', fontSizes[0] + 'pt');
    fontSizes.reverse();
  })

或者，使用CSS：

<style type="text/css">
  p {
    font-size: 14pt;
  }    
  p.larger {
    font-size: 16pt;
  }
</style>

<script>    
  $('input').click(function() {
    $('p').toggleClass('larger');
  })
</script>

答案 1 :(得分：1)

CSS

.small-text { font-size: 14pt; }
.large-text { font-size: 16pt; }

的Javascript

$(function(){
    var textSizeButton = $("#text-size-toggle");
    textSizeButton.click(function(){
        var body = $('body'); // or any selector you want
        if (body.hasClass('small-text')) {
            body
                .removeClass('small-text')
                .addClass('large-text');
            textSizeButton.setAttr('value', 'Go smaller');
        }
        else {
            body
                .removeClass('large-text')
                .addClass('small-text');
            textSizeButton.setAttr('value', 'Go larger');
        }
    });
});

HTML

<input type="button" id="text-size-toggle" value="Go larger" />

答案 2 :(得分：1)

使用jquery ui，而不是从复选框中创建一个按钮。你可以在这里下载：http://jqueryui.com/download

 $("#check").button();
    $("#check").click(function () {
        var ourText = $('p');
        if ($(this).is(':checked')) {
            ourText.css('fontSize', 'large')
        }
        else {
            ourText.css('fontSize', 'small')
        } 
    });