2

我的网站有一个字体大小调整器。我需要为调整大小设置最大大小。

大小调整器可以工作，但不确定为什么我的最大值不起作用？

// Reset Font Size
var targetContainers = $('.one-third, .two-thirds');
var originalFontSize = $(targetContainers).css('font-size');

// Increase Font Size
$(".resize-larger").click(function() {
    var currentFontSize = $(targetContainers).css('font-size');
    var maxSize = $('18');

    if (currentFontSize < maxSize) {

        var currentFontSizeNum = parseFloat(currentFontSize, 10);
        var newFontSize = currentFontSizeNum * 1.2;
        $(targetContainers).css('font-size', newFontSize);
        return false;

    }

});​
4

3 回答 3

2

参考： jsFiddle

font-size我已经修改了您原来的想法，并说明了当使用 jQuery获取 CSS 时，单元（例如， px）得到正确处理。maxSize字体大小将“上限”为您在变量中指定的最大值。

HTML：

<div class="resize-larger">[+] Increase Font Size</div>   <br /><br />

<p class="one-third">This is a test</p> <br /><br />

<p class="two-thirds">This is a test</p> <br /><br />

<br /><br /><br />

<div id="results">Current font-size: </div>

CSS：

.resize-larger {
    width: 175px;
    height: 40px;
    line-height: 40px;
    background-color: yellow;
    color: red;
    border: 1px solid red;
    margin: 10px;
    text-align: center;
}


p {
    font-size: 12px;
    font-family: Arial;
    font-weight: bold;
    color: blue;
}

jQuery：

// Reset Font Size
var targetContainers = $('.one-third, .two-thirds');

// Increase Font Size
$(".resize-larger").click(function() {

    var currentFontSize = parseFloat($(targetContainers).css('font-size'), 10);

    var maxSize = 18;

    // This 'if' is 'true' when var maxsize (a number) is larger than var currentFontsize (also a number).
    if (currentFontSize < maxSize) {

        var currentFontSizeNum = parseFloat(currentFontSize, 10);
        var newFontSize = currentFontSizeNum * 1.2;

        // Once the calculated newFontSize value is obtained, it will be capped to maxSize if it's larger.
        if (newFontSize > maxSize) {
            newFontSize = maxSize;
        }

        // This will show the current font-size in the results div.
        $('#results').html('Current font-size: ' + newFontSize + 'px');

        // Apply the newFontSize value, adding in unit of 'px' to the current value.
        $(targetContainers).css('font-size', newFontSize + 'px');
        return false;

    }

});


// On page load, the results div will be populated with the current font size.
$('#results').html('Current font-size: ' + $(targetContainers).css('font-size'));
于 2012-08-07T04:13:52.350 回答
2

因为$('18');不是数字。不要过度使用 jQuery：

var maxSize = 18;
于 2012-08-07T03:15:41.920 回答
1

这是解决方案：http: //jsfiddle.net/pruGc/16/

// Reset Font Size
var targetContainers = ['.one-third', '.two-thirds'];

// Increase Font Size
$(".resize-larger").click(function() {
    var currentFontSize;
    var maxSize = 40;

    for (var i = 0; i < targetContainers.length; i++) {
        currentFontSize = parseInt($(targetContainers[i]).css('font-size'), 10);

        var newFontSize = currentFontSize * 1.2;
        if (newFontSize < maxSize) {
            $(targetContainers[i]).css('font-size', newFontSize);
        } else {
            $(targetContainers[i]).css('font-size', maxSize);
        }
    }
});​

我所做的不是拥有一个选定元素的数组，而是将它们的类名放在一个数组中，然后在for循环中使用它来获取数组中的每个元素，然后将每个元素设置为所需的大小。

这也使您能够font-size为每个元素设置不同的元素，并使每个元素单独变大。

出于某种原因，我知道为什么，但即使 css 属性设置在“pt”的 for 中，它也会将其转换为“px”，所以说最大值是 18（我假设你的意思是，就像在 Microsoft Word 中一样，字体大小为 18）错误的。

于 2012-08-07T04:07:12.217 回答