使用按鈕的Javascript更改變量

我正在嘗試使用jquery打開另一個窗口的按鈕。使用按鈕的Javascript更改變量

該按鈕應該能夠打開窗口。然後應該使用相同的按鈕關閉窗口。我似乎遇到的問題表明，在按鈕打開窗口後，我的變量沒有被設置。我對JavaScript和jquery非常陌生，所以我不確定我是否做錯了什麼。

<html> 
    <head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     var FileEdit = 0; 
     $(document).ready(function(){ 
     if (FileEdit == 0) 
     { 
      $("button").click(function(){ 
      $("div").animate({opacity:0.4},"fast"); 
      $("div").animate({height:300,width:300},"slow"); 
      $("div").animate({opacity:1},"slow"); 
      FileEdit = 1; 
      }); 
     } 
     if (FileEdit == 1) 
     { 
      $("button").click(function(){ 
       $("div").animate({height:000,width:000},"slow"); 
       FileEdit = 0; 
      }); 
     } 
     }); 
    </script> 
    </head> 

    <body> 
     <button>Start Animation</button> 
     <br /><br /> 
     <div style="background:#98bf21;height:000px;width:000px;"> 
     </div> 
    </body> 
</html>

http://jsfiddle.net/tqpTE/

來源

2012-08-23 pr-

你應該鏈接所有的動畫調用，或者把'$（「div」）'放在一個變量中。 – Krycke

@Krycke我不確定你的意思。你能爲我解釋一些嗎？ –

當您在每行上使用'$（「div」）'時，jQuery將搜索所有div元素三次。通過使用'var divs = $（「div」）;'你可以在其他行上使用該變量，並且只需要一次查找，或者像'$（「div」）一樣使用鏈接。doSomthing（）。doSomethingElse（）; ' – Krycke

jsFiddle DEMO

var FileEdit = 0; 

$("button").on('click', function(){ 

    // You only need one on('click') function 
    // Test for FileEdit here & do whatever you need 

    if (FileEdit === 0) { 

     // Also having those 3 animations right in a row won't make them 
     // go one - after - another. You need to use callback functions 
     // to start the next animation after the previous one finished. 

     $("div").animate({opacity:0.4},"fast", //callback1 
      function() { $(this).animate({height:300,width:300},"slow", //callback2 
       function() { $("div").animate({opacity:1},"slow"); } 
      )} 
     ); 
     FileEdit = 1; 
    } 

    else { 
     $("div").animate({height:000,width:000},"slow"); 
     FileEdit = 0; 
    } 
});

More info on .animate() callback functions

來源

2012-08-23 17:31:44

你的情況需要在每次點擊運行 - 不只是一次，DOM的準備，因爲目前。另外請注意你的代碼可以相當大幅度地減少到這樣的事情：

var fileEdit = 0; 
$(function(){ 
    $("button").on('click', function() { 
     var anim_data = !fileEdit ? {width: 300, height: 300} : {width: 0, height: 0}; 
     $("div").animate(anim_data, 'slow'); 
     fileEdit = !fileEdit ? 1 : 0; 
    }); 
});

的幾個注意事項：

1）你似乎兩次（一次動畫不透明度爲1.4，並且，同時，對1）因此，爲了演示的目的，我完全刪除了對它的引用。 2）除非你需要動畫到部分不透明（而不是0或1），否則更容易使用jQuery的fadeIn()和方法。

3）設置width: 000與width: 0相同。

4）避免var名稱中的大寫字母 - 大寫字母通常用於表示構造函數。

5）使用double等於0和1的值進行測試時要小心，因爲the concept of truthy/falsy values會讓您有些意外。不確定的是，用===而不是==進行測試總是最安全的。

6）雖然click沒問題，但jQuery 1.7引入了一個整潔的事件API，所以你現在可以使用on()和off()。 click()和其他只是別名，在幕後，代表on()。

來源

2012-08-23 17:36:17 Utkanos

使用按鈕的Javascript更改變量

回答

相關問題