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); 
});

你可以通过删除变量声明并在一条长行上完成所有操作来缩短它，但我将其分解以使其更具可读性。

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

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

3 个答案: