Question

代码运行良好，但我无法控制我的布局。按下链接后，它会在两个按钮状态之间正确切换。 如何在按下链接之前调用'plus class'？请帮忙。另外，我已尝试使用div和span来组织它，但它需要一些tweeking
谢谢，

enter image description here

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
</head>
<style type="text/css">
    #h6{font-size: 12px; padding-right: 0px;}
    .plus{left:0px;height:33px;width:32px; background:url('sprite.gif') 0 0px;}
    .minus{left:0px;height:33px;width:32px; background:url('sprite.gif') 0 -34px;}
</style>
<h6 id="deToggle"><a href="#" class="styles2" id="h6">Larger</a></h6>
<script language="javascript">
    var click = 0%2;
    var fontSizes = [14, 16]
    $('#deToggle').toggle(
        function(){
            var sprot = $('#deToggle');//
            var tog = $('#deToggle');
            tog.html('<a href="#">Larger</a>');
            $('#OurText').css('fontSize', fontSizes[1] + 'px');
            $(this).val("-");
            tog.addClass('plus');
            tog.removeClass('minus');
        },
        function(){
            var tog = $('#deToggle');
            tog.html('<a href="#">Smaller</a>');
            $('#OurText').css('fontSize', fontSizes[0]+ 'px');
            $(this).val("+");
            tog.removeClass('plus');
            tog.addClass('minus');
        });
</script>
<p id="OurText">My Text!!!</p>
</html>

sprit.gif翻转图像 enter image description here

Answer 1

我在此之前的2天回复

请参阅here

寻求帮助

DEMO

Answer 2

您需要为css添加doctype才能正常工作。在 head 标记

之前添加此项

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Answer 3

这是因为您没有设置初始大小。你可以使用css或javascript。

推荐的方法是使用CSS。将其添加到您的风格

#OurText {
    font-size: 14px;
}

参见演示。 http://jsfiddle.net/RV5LE/

我已经清理了一下你的代码了。下次在jsfiddle上发布你的问题

Answer 4

您的意思是您想在初始页面加载时应用该类吗？

调用代码在初始页面加载时添加plus类。我还将代码重构为函数，并将其全部放在jQuery的document.ready函数

中

$(document).ready(function(){ 
     Plus();

     $('#deToggle').toggle(function(){
        Plus();
     }, function(){
        Minus();
     });

});

function Plus(){
    var sprot = $('#deToggle');//
    var tog = $('#deToggle');
    tog.html('<a href="#">Larger</a>');
    $('#OurText').css('fontSize', fontSizes[1] + 'px');
    $(this).val("-");
    tog.addClass('plus');
    tog.removeClass('minus');
}

function Minus(){
    var tog = $('#deToggle');
    tog.html('<a href="#">Smaller</a>');
    $('#OurText').css('fontSize', fontSizes[0]+ 'px');
    $(this).val("+");
    tog.removeClass('plus');
    tog.addClass('minus');
}

Answer 5

css('fontSize', fontSizes[0]+ 'px');

应该是：

css('font-size', fontSizes[0]+ 'px');
         ↑

fontSize用于animate（）。此外，您不需要+'px'所有数字css值都可以作为数字给出。

jQuery，在addClass和removeClass之前调用类

5 个答案: