想要使用 jquery 增加锚点元素的大小,但不增加锚点本身的大小

问题描述 投票:0回答: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>
javascript jquery
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 标签。

© www.soinside.com 2019 - 2024. All rights reserved.