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 回答