刷新和替換的內容使用jQuery

生病嘗試，使這個快速和容易。我希望一個div，刷新和替換的內容使用jQuery

現在我有一個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>

來源

2011-06-29 The Fragile Machine

你剛剛在那裏。需要進行一些更改。

首先添加一個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

來源

2011-06-29 21:47:53

這個偉大的工程謝謝！非常感謝大家！ –

不客氣。您可以刪除這些console.log行。他們只是爲了調試，我在發佈答案之前忘了刪除它們。 –

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

來源

2011-06-29 21:37:55

怎麼是這樣的：

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

您可以通過擺脫變量聲明的，做這一切在一個長線縮短，但我把它弄壞了以使其更具可讀性。

這將需要的HTML從隨機div與class「newjobz」，並與id「divToChange」用其覆蓋div的HTML。

來源

2011-06-29 21:42:53

刷新和替換的內容使用jQuery

回答

相關問題