Onclick在Div中載入頁面並更改文字

我有這個按鈕，它當前所做的是點擊它將文本從text1更改爲text2下面是按鈕和實現此目的的腳本。Onclick在Div中載入頁面並更改文字

按鈕

<button type="button" id="buttonsend" style="margin-top:-7px;" class="btn btn-default"> 
    <span>text 1</span> 
    <span style="display:none">text 2</span> 
</button> 

<div id="load"></div>

的Javascript

$('#buttonsend').click(function() { 
    $('span',this).toggle(); 
});

我想什麼它也做的就是在#load加載一個頁面格設置只有一次的點擊，也刷新加載頁面div每10秒。

例

一旦按鈕被點擊的文本更改爲text2和#load DIV加載demo.html頁面，並刷新該頁面每10秒。一旦再次點擊該按鈕，#load div會刷新頁面，文本將返回text1。我真的很抱歉提出這個要求，但我在實現這個過程中遇到了一些困難。

我編寫了下面這個腳本，它刷新頁面每隔10秒加載一個div，但是它在點擊按鈕之前加載，所以我不確定如何在按鈕被點擊並且按鈕被按下時如何讓它工作再次點擊停止刷新。謝謝。

刷新腳本

$(document).ready(function(){ 
    setInterval(function(){ 
     $("#load").load('/demo.html') 
    }, 10000); 
});

來源

2016-06-12 Lewis Day

Intervall在ms中，您需要輸入10,000爲10s :) – AlexG

@AlexG eagle眼睛：3 –

您可以使用此布爾變量，你切換按鈕被點擊時，並在您的區間回調你只是檢查是否設置重裝前：

var reload = false; 
$('#buttonsend').click(function() { 
    reload = !reload; 
    // other actions... 
}); 

$(document).ready(function(){ 
    setInterval(function(){ 
     if (reload) $("#load").load('/demo.html') 
    }, 1000); // or 10000 if you want 10 sec. 
});

來源

2016-06-12 20:39:46 trincot

這正是我非常感謝你，因爲乾淨的快速反應非常感謝你。 –

嘗試使用變量來保持你的按鈕的狀態：

$(document).ready(function(){ 
    var button_state = 'state1'; 

    function toggleButtonState() { 
    if(button_state == 'state1') button_state == 'state2'; 
    else button_state == 'state1'; 
    } 

    $('#buttonsend').click(function() { 
    toggleButtonState(); 
    $('span',this).toggle(); 
    }); 

    setInterval(function(){ 
    if(button_state == 'state2') $("#load").load('/demo.html'); 
    }, 10000); 
});

來源

2016-06-12 20:41:39 Wikiti

謝謝你的答案肯定會+1它將不得不標記另一個答案作爲答案雖然也擊敗了你：3 aha謝謝你，雖然真的很感激它 –

儘管Wikiti和trincot的回答是正確的，但我相信最好在不使用循環時禁用循環，使用clearInterval。這將確保內容在用戶按下按鈕時加載 - 否則，就像在Wikiti和trincot的答案中一樣，用戶可能會錯過循環迭代，並在下一次迭代有9秒時點擊該按鈕，因此他必須等待9秒鐘以便內容開始加載。

$(document).ready(function(){ 
    var timer = "none"; 

    function startLoop() { 
    timer = setInterval(function(){ 
     $("#load").load('/demo.html'); 
    }, 10000); 
    } 

    function toggleButtonState() { 
    if (timer === "none") { startLoop(); } 
    else { clearInterval(timer); timer = "none"; } 
    } 

    $('#buttonsend').click(function() { 
    toggleButtonState(); 
    $('span',this).toggle(); 
    }); 
});

來源

2016-06-12 20:48:42 pzmarzly

如果你給文本2和id，你可以看到，如果它是可見或不可見，或者在一個div包裹它，我也有類似的需要有一個倒計時，以暫停時，格是可見的。不記得我從哪裏拿下了。基本上從300開始倒數，但當div名爲「callUpdateWrap」可見時暫停。我還收到了更新的網頁上看到計時器（見一路下跌的頁面）：

JS：

function refreshpage(interval, countdownel, totalel){ 
    var countdownel = document.getElementById(countdownel) 
    var totalel = document.getElementById(totalel) 
    var timeleft = interval+1 
    var countdowntimer 

    function countdown(){ 
     if (!$('#callUpdateWrap').is(':visible')) { 
     timeleft-- 
     } 
     countdownel.innerHTML = timeleft 
     if (timeleft == 0){ 
      clearTimeout(countdowntimer) 
      window.location.reload() 
     } 
     countdowntimer = setTimeout(function(){ 
      countdown() 
     }, 1000) 

    } 

    countdown() 
    } 

    window.onload = function(){ 
     refreshpage(300, "countdown") // refreshpage(duration_in_seconds, id_of_element_to_show_result) 
    }

HTML：

<h2>Page will Refresh in <b id="countdown"></b> seconds</h2>

快速編輯：如果您需要計時器要重置，在div被檢查如果可見的情況下，您可以添加一個else以將時間設置回10.

來源

2016-06-12 20:48:48 Rmj86

Onclick在Div中載入頁面並更改文字

回答

相關問題