Question

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

缩放器有效，但不确定为什么我的最大值不起作用？

// 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;

    }

});

Answer 1

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

var maxSize = 18;

Answer 2

参考： jsFiddle

我已经修改了你原来的想法，并解释了当使用jQuery获取CSS font-size时，单位（例如，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'));

Answer 3

这是解决方案：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，并使每个元素分别变大。

由于某种原因idk为什么，但即使css属性设置在'pt'的for中它将其转换为'px'所以说max是18（我假设你的意思，就像在Microsoft Word中，字体大小18 ）会错的。

字体调整最大大小

3 个答案: