[英]jQuery, call class before addClass and removeClass
代码运行良好，但是我无法控制布局。 一旦按下链接，它将在两个按钮状态之间正确切换。 在按下链接之前，如何调用“加班”？ 请帮忙。 另外，我尝试了div和span来组织它，但是需要一些时间
谢谢，
<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翻转图像
您需要添加doctype才能使CSS正常工作。 在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" />
这是因为您没有设置初始大小。 您可以为此使用CSS或JavaScript。
推荐的方法是使用CSS。 将此添加到您的样式
#OurText {
font-size: 14px;
}
参见演示。 http://jsfiddle.net/RV5LE/
我已经清理了一下您的代码。 下次在jsfiddle上发布您的问题和副本
您是说要在初始页面加载中应用该类吗？
调用代码以在初始页面加载时添加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');
}
css('fontSize', fontSizes[0]+ 'px');
应该：
css('font-size', fontSizes[0]+ 'px');
↑
该fontSize在animate（）中使用。 另外，您不需要+'px'可以将所有的数字css值都指定为数字。
jQuery使用.removeClass（）和.addClass（）切换类无法正常工作
[英]jQuery toggling the class with .removeClass() and .addClass() not working properly
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.