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

Question

我会尝试让这变得快速而简单...我希望，

现在我有一个 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>

Answer 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

Answer 2

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

Answer 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 覆盖 div 的 HTML > 用它“divToChange”。