如何在不刷新整個頁面的情況下再次運行腳本？

這是我第一次編程任何東西，所以請裸露在我身邊。如何在不刷新整個頁面的情況下再次運行腳本？

如果你看看greenb.byethost12.com，你會看到我迄今爲止所開發的東西。到目前爲止，當您點擊正確的答案時，它將會刷新整個頁面document.location.reload(index.php) 。

我想要的只是內容刷新一組新的數字（只運行JavaScript）。

不知道如果我讓自己清楚，但任何幫助將很樂意欣賞。此外，任何批評都是受歡迎的，因爲我可能會做出我從未見過的錯誤的TON。乾杯!

代碼：

<!DOCTYPE html>

MathMap

<div data-role="page" id="page1"> 
    <div data-theme="e" data-role="header"> 
    <a id="score" data-role="button" data-transition="none" href="#page1" data-icon="star" 
    data-iconpos="left" class="ui-btn-right"> 
     Score 
    </a> 
    <h1> 
     MathMap&trade;  
    </h1> 
    </div> 
<div align="center" data-role="content"> 
<div align="center"><h1 id="equal"> 

    </h1></div> 
<div id="main" align="center" style="top: 150px;"> 
    <a id="a" data-role="button" data-theme="e" href="#page1" data-inline="true"> 

    </a> 
    <a id="b" data-role="button" data-theme="e" href="#page1" data-inline="true"> 

    </a> 
    <a id="c" data-role="button" data-theme="e" href="#page1" data-inline="true"> 

    </a> 
    <a id="d" data-role="button" data-theme="e" href="#page1" data-inline="true"> 

    </a></div> 
    <script> 
    $(document).ready(function(){ 
    $("#main").hide().fadeIn(1000); 
    }); 

    var x = Math.floor(Math.random()* 50); 
    var y = Math.floor(Math.random()* 50); 
    var a = Math.floor(Math.random()* 10); 
    var b = Math.floor(Math.random()* 10); 
    var c = Math.floor(Math.random()* 10); 
    var d = Math.floor(Math.random()* 10); 
    var divide =" \u00F7 " 



    var problems = new Array(); 
    problems[0]=x+y; 
    problems[1]=x-y; 
    problems[2]=x*y; 
    problems[3]=x/y; 

    var split = new Array(); 
    split[0]=$("#a"); 
    split[1]=$("#b"); 
    split[2]=$("#c"); 
    split[3]=$("#d"); 

    var formula = new Array(); 
    formula[0] = x +" + "+ y +" = "; 
    formula[1] = x +" - "+ y +" = "; 
    formula[2] = x +" x "+ y +" = "; 
    formula[3] = x + divide + y +" = "; 

    var formrand = formula[Math.floor(Math.random()*formula.length)]; 
    var prorand = problems[Math.floor(Math.random()*problems.length)]; 
    var rand = split[Math.floor(Math.random()*split.length)]; 

     $("#equal").text(function myCalculation(){ 

       if ((formrand) == (formula[0])){ 
       $("#equal").text(formula[0]); 
       $("#a").text(problems[0]+a); 
       $("#b").text(problems[0]+b); 
       $("#c").text(problems[0]+c); 
       $("#d").text(problems[0]+d); 
       $(rand).text(problems[0]); 
       $("#a,#b,#c,#d").not(rand).click(function(){ 
        $(this).transition({ opacity: 0.2, scale: 0.5}); 
       }); 
       $(rand).click(function(){ 
       $("#equal").text(formrand+problems[0]); 
       $(rand).transition({ scale: 1.5 }).animate({"background-color":"green","color":"white"},1000); 
       $("#a,#b,#c,#d").not(rand).transition({ opacity: 0.2, scale: 0.5 }).delay(2000,function(){ 
        window.location.reload("index.php"); 
       }); 

       }); 


      } 

       if ((formrand) == (formula[1])){ 
       $("#equal").text(formula[1]); 
       $("#a").text(problems[1]+a); 
       $("#b").text(problems[1]+b); 
       $("#c").text(problems[1]+c); 
       $("#d").text(problems[1]+d); 
       $(rand).text(problems[1]); 
       $("#a,#b,#c,#d").not(rand).click(function(){ 
        $(this).transition({ opacity: 0.2, scale: 0.5}); 
       }); 
       $(rand).click(function(){ 
       $("#equal").text(formrand+problems[1]); 
       $(rand).transition({ scale: 1.5 }).animate({"background-color":"green","color":"white"},1000); 
       $("#a,#b,#c,#d").not(rand).transition({ opacity: 0.2, scale: 0.5 }).delay(2000,function(){ 
        window.location.reload("index.php"); 
       }); 

       }); 

      } 
       if ((formrand) == (formula[2])){ 
       $("#equal").text(formula[2]); 
       $("#a").text(problems[2]+a); 
       $("#b").text(problems[2]+b); 
       $("#c").text(problems[2]+c); 
       $("#d").text(problems[2]+d); 
       $(rand).text(problems[2]); 
       $("#a,#b,#c,#d").not(rand).click(function(){ 
        $(this).transition({ opacity: 0.2, scale: 0.5}); 
       }); 
       $(rand).click(function(){ 
       $("#equal").text(formrand+problems[2]); 
       $(rand).transition({ scale: 1.5 }).animate({"background-color":"green","color":"white"},1000); 
       $("#a,#b,#c,#d").not(rand).transition({ opacity: 0.2, scale: 0.5 }).delay(2000,function(){ 
        window.location.reload("index.php"); 
       }); 

       }); 

      } 
       if ((formrand) == (formula[3])){ 
       $("#equal").text(formula[3]); 
       $("#a").text(Math.round(problems[3]+a)); 
       $("#b").text(Math.round(problems[3]+b)); 
       $("#c").text(Math.round(problems[3]+c)); 
       $("#d").text(Math.round(problems[3]+d)); 
       $(rand).text(Math.round(problems[3])); 
       $("#a,#b,#c,#d").not(rand).click(function(){ 
        $(this).transition({ opacity: 0.2, scale: 0.5}); 
       }); 
       $(rand).click(function(){ 
       $("#equal").text(formrand+Math.round(problems[3])); 
       $(rand).transition({ scale: 1.5 }).animate({"background-color":"green","color":"white"},1000); 
       $("#a,#b,#c,#d").not(rand).transition({ opacity: 0.2, scale: 0.5 }).delay(2000,function(){ 
        window.location.reload("index.php"); 
       }); 

       }); 
      } 
     }); 






    </script> 
</div> 
<div data-theme="e" data-role="footer" data-position="fixed" data-inline="true"> 
    <h5> 
     MathMap Learning 
    </h5> 
</div> 
</body>

來源

2013-08-18 Neophyte Developer

把你在一個函數中做的任何事情都打包並重新調用它？ – adeneo

這就是我常識告訴我要做的事，但我想我堅持把實際的代碼做到這一點。 –

嗨，你可能會使用ajax請求。加載一頁。或者，也許幾乎整個頁面沒有重新加載頁面。否則，您可能會使用setInterval JavaScript在一段時間後重新加載該腳本。 –

您應該將函數綁定到「正確答案」的onClick事件。

$('#idOfYourAnswer').on('click', function(){ 
    //Do something here 
});

http://api.jquery.com/on/

來源

2013-08-18 00:26:02 Trendy

_「從jQuery 1.7開始，.on（）方法是將事件處理程序附加到文檔的首選方法。」_ - http://api.jquery.com/bind/ – elclanrs

//在此處執行操作我認爲麻煩在哪裏。 –

@NeophyteDeveloper我在哪裏寫評論「//在這裏做點什麼」就是你放置你正在執行的代碼的地方。只有當用戶點擊正確答案時，代碼纔會執行。 – Trendy

嘗試使用callbacks或者你在哪裏結束再次調用同樣的功能後發生的事件一樣時髦的建議，你可以使用點擊事件，你可以使用的功能迴路。

start(); 
end(); 
$('button').click(function() { 
    start(); 
    end(); 
});

所以，問題將被自動創建的第一次，然後該應用程序將等待一個事件來創建無論你是使用它的一個新的problem..or。

來源

2013-08-18 02:45:49

您可以使用setInterval（）來設置函數的超時時間，或者您可以將函數綁定到按鈕的單擊事件。

來源

2013-08-18 09:25:33 thecohenoam

如何在不刷新整個頁面的情況下再次運行腳本？

回答

相關問題