1

a要素とp要素のフォントサイズを大きくしたいのですが、フォントを大きくする要素自体がアンカー要素なので押すと大きくなりますが、これは誤りでありません。

HTML:

<div class="fontsize">
<a class="fontSizePlus" href="#">A+</a>
|
<a class="fontReset" href="#" style="font-size: 17px;">Reset</a>
|
<a class="fontSizeMinus" href="#" style="font-size: 17px;">A-</a>
</div>

これまでのところ、次のようなさまざまなターゲティング ソリューションを試しました。 

var elm = $('p, a:not("a.fontSizePlus")');

明らかに運が悪い。

jQuery:

<script type="text/javascript">
$(document).ready(function () {

    //min font size
    var min=9;  

    //max font size
    var max=16; 

    //grab the default font size
    var reset = $('p').css('fontSize'); 

    //font resize these elements
    var elm = $('p, a:not("a.fontSizePlus")');  

    //set the default font size and remove px from the value
    var size = str_replace(reset, 'px', ''); 

    //Increase font size
    $('a.fontSizePlus').click(function() {

        //if the font size is lower or equal than the max value
        if (size<=max) {

            //increase the size
            size++;

            //set the font size
            elm.css({'fontSize' : size});
        }

        //cancel a click event
        return false;   

    });

    $('a.fontSizeMinus').click(function() {

        //if the font size is greater or equal than min value
        if (size>=min) {

            //decrease the size
            size--;

            //set the font size
            elm.css({'fontSize' : size});
        }

        //cancel a click event
        return false;   

    });

    //Reset the font size
    $('a.fontReset').click(function () {

        //set the default font size 
         elm.css({'fontSize' : reset});     
    });

});

//A string replace function
function str_replace(haystack, needle, replacement) {
    var temp = haystack.split(needle);
    return temp.join(replacement);
}
</script>
4

1 に答える 1

0

私はあなたが何を求めているのか完全に理解しているかどうかわかりません...

これは、セットアップされたフィドルへのリンクです

http://jsfiddle.net/mkyzP/

すべてうまくいくようです。

必ず変更する必要があります

var elm = $('p, a:not("a.fontSizePlus")');

に

var elm = $('p, a:not("a.fontSizePlus, a.fontReset, a.fontSizeMinus")');

リンクが縮小または拡大しないようにします。

あるいは、a タグを span タグに変更することもできます。

于 2012-09-10T14:04:19.960 に答える