2

Web サイト用のフォント リサイザーがあります。サイズ変更の最大サイズを設定する必要があります。

リサイザーは機能しますが、最大値が機能しない理由がわかりませんか?

// 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-sizejQuery を使用して CSS を取得するときにユニット (たとえば、px) が正しく処理されるという事実を説明しました。font-size は、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要素ごとに異なるものを持ち、それぞれを個別に大きくすることを可能にします。

何らかの理由でidkの理由ですが、cssプロパティが「pt」のforに設定されている場合でも、それは「px」に変換されるため、最大値は18です(Microsoft Wordのように、フォントサイズは18であると仮定しています)違う。

于 2012-08-07T04:07:12.217 に答える