用JavaScript中的隨機單詞替換段落標記內容

當用戶進入頁面時，我希望div位於標題的中心，下面的報價是隨機從列表中選取的，並且按鈕可以進入網站。這一切都很好，但我似乎無法讓按鈕淡入主站點並淡出登陸分區。這裏是一個試圖幫助解釋更多東西的jsfiddle。用JavaScript中的隨機單詞替換段落標記內容

JSFIDDLE

您大概可以告訴，我沒那麼偉大的JavaScript或jQuery和什麼到目前爲止，我所做的是從學習的點點滴滴，並通過上網代碼示例網絡

我不明白爲什麼它不會工作，因爲我在jsfiddle中玩了一個我想要做的簡化版本，並且工作。

Simplified Version

下面的代碼的簡化版本（它不會讓我發佈無需添加代碼？）

HTML

<div class="landingDiv"> 
    <h1>LANDING DIV</h1> 
    <button id="showMain">Enter Site</button> 
</div> 

<div class="main"> 
    <h1>Main Site</h1> 
</div>

JQUERY

$("#showMain").click(function() { 
    $(".main").fadeIn(1000); 
    $(".landingDiv").fadeOut(1000); 
});

CSS

.main { 
display: none; 
opactiy: 0; 
}

謝謝先進。

Steve。

來源

2013-05-15 SteveJeffs

您需要在您的新提琴jQuery庫。 – sh0ber

第一jQuery的示例扔一個錯誤：含義的jQuery沒有定義

$ is not defined

/包括在內。這不是。但在第二個jsFiddle中，你包含了jQuery。

你會注意到，在jsfiddle的左邊，你會看到在「Framewords & Extensions」標題下你可以包含一個Framewordk - 所以，包括jQuery！

下面是用jQuery更新的小提琴包括：http://jsfiddle.net/6cGHF/1/

，正如你在JavaScript開發向前發展，它始終是一個好主意，檢查你的瀏覽器開發者工具的錯誤時，意想不到的事情發生了。它總能幫助你，當你在StackOverflow上提出問題時，提供這些錯誤對我們有幫助！ :)

Chrome中的開發人員工具的快捷方式是F12 - 如果您有錯誤，您可以看到一個帶有X的小紅圈 - 單擊它以獲取更多信息。但開發人員工具也可用於其他主流瀏覽器（IE8及以下版本除外）。

編輯：

包裝你click()事件功能在$(document).ready()

$(document).ready(function() { 
    $("#showMain").click(function() { 
     $(".main").fadeIn(1000); 
     $(".landingDiv").fadeOut(1000); 
    }); 
});

正在發生的事情是，你的HTML文件是從上往下讀。所以它會在#showMain元素被讀取之前達到您的click函數。所以，jQuery找不到它。

在jsFiddle中這不是問題的原因是因爲所有JavaScript代碼都被封裝在一個「onLoad」函數中（當然，這與$(document).ready()有點不同），但它通過執行你的代碼來解決這個問題所有內容都已加載完畢後的JavaScript。您可以在上面鏈接的小提琴的左側看到，您會發現選擇了「onLoad」的下拉菜單。在這裏面，你也可以選擇「OnDomready」（這將相當於$(document).ready()）

總結：

切勿使用$(document).ready()中的jsfiddle。你不需要它。
DO使用$(document).ready()使用$(document).ready() javascript依賴於DOM準備就緒（即「您的所有內容對您的JavaScript可見」）。

來源

2013-05-15 02:09:37 Jace

Woops忘記了，謝謝。唯一的問題是，我使用jsfiddle來展示你們，我在Dreamweaver CS6中用jquery鏈接來構建網站。 '

在你的小提琴中的問題是你沒有添加jQuery，所以當你嘗試引用'$'時，會引發javascript錯誤。只需將參考添加到jQuery庫中，您的小提琴就可以在單擊時淡出按鈕。

來源

2013-05-15 02:09:24 Duffmaster33

您的問題：

1）添加jQuery庫到您的小提琴。

2）從您的CSS中的.main中刪除opacity:0;。 display:none;就足夠了。

3）使用此淡出/中的元素：

$("#showMain").click(function() { 
    $(".landingDiv").fadeOut(1000, function() { 
     $(".main").fadeIn(1000); 
    }) 
});

來源

2013-05-15 02:19:47 rtcherry

感謝您的意見:)剛試過這封信的建議，仍然沒有。我加載頁面，點擊進入網站，沒有任何東西，它只是坐在那裏。 – SteveJeffs

相關問題

用JavaScript中的隨機單詞替換段落標記內容

回答

相關問題