jQuery，在addClass和removeClass之前調用類

代碼運行良好，但我無法控制自己的佈局。一旦鏈接被按下，它將在兩個按鈕狀態之間正確切換。 在鏈接被按下之前，我怎樣稱呼'加班'？請幫忙。另外，我已經試過div的，跨越組織，但它需要一些tweeking
感謝，jQuery，在addClass和removeClass之前調用類

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

來源

2011-03-08 DisEngaged

我最初以爲＃H6是在你的CSS一個錯誤，但此時才明白你有id爲「H6」錨標記。這造成了很大的混亂。試着給id提供更有意義的名字。 – Mahesh 2011-03-08 10:34:46

您的意思是您想要將該類應用於初始頁面加載？

調用代碼在初始頁面加載時添加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'); 
}

來源

2011-03-08 09:54:27

-1

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

應該be：

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

fontSize用於animate（）。此外，您不需要+'px'所有數字css值可以作爲數字給出。

來源

2011-03-08 09:42:06

這個答案是從哪裏來的，它是否與這個問題有關？ – Prakash 2011-03-08 09:50:48

不錯的箭頭雖然... :) – 2011-03-08 09:56:42

@geoff箭頭不是我的：D balexandre添加了它... – 2011-03-08 09:59:24

我是這樣的

前2日內答覆見here

求人

DEMO

來源

2011-03-08 09:43:38 diEcho

@FXquincy根據需要應用CSS和圖像，這裏只是邏輯 – diEcho 2011-03-08 09:45:47

您需要添加的文檔類型爲CSS工作。在頭標籤

<!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" />

來源

2011-03-08 09:43:55 andsien

這是因爲你沒有設置初始大小之前添加此。你可以使用CSS或JavaScript。

推薦的方法是使用CSS。添加到您的風格

#OurText { 
    font-size: 14px; 
}

觀看演示。 http://jsfiddle.net/RV5LE/

我已經清理了一下你的代碼。並且下一次在jsfiddle上發佈您的問題副本

來源

2011-03-08 09:50:21 Mahesh

jQuery，在addClass和removeClass之前調用類

回答

相關問題