使用 JQuery 刷新和替换 div 中的内容答案

【问题标题】：Refresh and replace content in a div using JQuery使用 JQuery 刷新和替换 div 中的内容
【发布时间】：2011-06-29 21:35:38
【问题描述】：

我会努力让这个过程变得简单快捷......我希望，

现在我有一个 div （在页面刷新时）会更改里面的内容。正在更改的内容实际上是在同一个文档上，我没有尝试从任何其他来源获取任何内容。

但我想做的是制作一个按钮来刷新该 div，以便用户可以循环浏览随机内容。它仍然可以随机循环，有没有办法做到这一点？这是我的代码，任何帮助都会摇滚！谢谢你！

<div id="topjob-contain">
<ul class="jobcontrols">
<li><a href="#" id="jobchanger"  >Load Another Job +</a></li>
</ul>

<div class="newjobz">
<h1><a href="#" target="_blank">#1 Random Job Title Here</a></h1>
<p>#1 Random Agency Name here</p>
<p>#1 Random Discription of job : .sed diam nonumm tincidunt ut laoreet dolorey nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<br clear="all" />
</div>

<div class="newjobz">
<h1><a href="#" target="_blank">#2 Random Job Title Here</a></h1>
<p>#2 Random Agency Name here</p>
<p>#2 Random Discription of job : .sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<br clear="all" />
</div>

<div class="newjobz">
<h1><a href="#" target="_blank">#4 Job Title Here</a></h1>
<p>#3 Random Agency Name here</p>
<p>#3 Random Discription of job : .sed diam nonummy t ut laoreet dolore magna aliquam erat volutpat. </p>
<br clear="all" />
</div>

<br clear="all" />
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
////////////Randomize content on pageload
function randomFromTo(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}

$(document).ready(function(){
var r = randomFromTo(1, $('div.newjobz').length);

$('div.newjobz').eq(r - 1).show();


});
</script>

【问题讨论】：

标签： jquery html refresh

【解决方案1】：

你就在那儿。需要进行一些更改。

首先添加一个css规则来隐藏你的div。

.newjobz{ display: none; }

然后像这样更改您的javascript：

function randomFromTo(from, to) {
    return Math.floor(Math.random() * (to - from + 1) + from);
}

function displayRandomJob() {
    var r = randomFromTo(1, $('div.newjobz').length);
    $('div.newjobz').hide().eq(r - 1).show();
}

$(document).ready(function() {
    displayRandomJob();
    $('#jobchanger').click(function() {
        displayRandomJob();
    });
});

jsFiddle

【讨论】：

不客气。您可以删除这些 console.log 行。它们只是用于调试，我在发布答案之前忘记将它们删除。

【解决方案2】：

使用http://api.jquery.com/load/

【讨论】：

【解决方案3】：

这样的事情怎么样：

$("#buttonId").click(function() {
   var numElements =  $(".newjobz").length;
   var randomContent = $(".newjobz").eq(Math.floor(Math.random() * numElements)).html();
   $("#divToChange").html(randomContent); 
});

您可以通过去掉变量声明并将其全部放在一行中来缩短此时间，但我将其拆分以使其更具可读性。

这将使用class“newjobz”从随机的div获取HTML，并用id“divToChange”覆盖div的HTML。

【讨论】：