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，切換按鈕以顯示加號或減號

回答

相關問題