Question

如何切换切换按钮以显示正负？
该按钮可放大和缩小文本。如果文字很大......按钮是
减号，如果文字很小......按钮是加号等。

我昨天得到了一些帮助，我还在努力学习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>

Answer 1

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

Answer 2

由于某种原因，我不知道你是否需要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/

Answer 3

你不能保持你的功能小吗？喜欢这个？

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

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

3 个答案: