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中载入页面并更改文字

回答

相关问题