旋轉圓點擊

Question

我有一個代碼，在頁面左側單擊一個詞，它會在頁面的右側顯示一些文字。這是工作代碼的jsfiddle。 現在，我的問題是我想在每個onclick頁面上顯示旋轉圓，然後在頁面的右側顯示文本。我對旋轉的圓圈代碼：

HTML：

<div id="loading"> 
    <img src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif"/> 
</div> 

的JavaScript：

function hideLoading() { 
    document.getElementById("loading").style.display = 'block'; 
} 

function showLoading() { 
    document.getElementById("loading").style.visibility = 'visible'; 
} 

CSS：

#loading { 
    display: none; 
} 

現在，我不知道如何將它們放置在我的工作代碼來獲得所需的結果。任何人都知道這樣做的正確方法？

Desired result: onclick左側的「abc」，應顯示旋轉圓圈1秒鐘，然後顯示「我應該在左側打印」。再次單擊「mno」時，應顯示第一個旋轉圓圈1秒，然後顯示「我應該在左側打印」文本。小提琴的工作版本爲onclick。

Answer 1

我仍然什麼你真的想在這裏混淆，但如果你想有1秒後加載消息消失，你應該使用setTimeout。類似這樣的：

function showAlert() { 
    showLoading(); 
    setTimeout(hideLoading,1000); 
    //Hide loading circle 
    var myString = "I should be printed on left side"; 
    document.getElementById("two").innerHTML = myString; 
} 

但是你還需要修正你的「showLoading」和「hideLoading」。事情是這樣的：

function hideLoading() { 
    document.getElementById("loading").style.display = 'none'; 
} 

function showLoading() { 
    document.getElementById("loading").style.display = 'block'; 
} 

http://jsfiddle.net/7uxHC/9/

順便說一句：如果你希望你的加載GIF出現在你的內容，然後將其position:absolute在CSS，但請注意您的GIF有一個白色的，而不是透明背景所以它會掩蓋你的內容。

Answer 2

您的請求尚不明確。

但首先，你應該可以解決這2個功能：

function hideLoading() { 
    document.getElementById("loading").style.display = 'none'; 
} 

function showLoading() { 
    document.getElementById("loading").style.display = 'block'; 
} 

Answer 3

您應該在每個元素上都使用一個處理函數，這兩個函數都會隱藏和顯示加載gif。此外，這是一個好主意，不要在每次調用使用getElementById，所以它保存在一個變量：

<div id="container"> 
    <div id="header"> 
     <h1>Main Title of Web Page</h1> 
Here I am trying to split the webpage into two columns and display text.</div> 
    <div id="one"> 
     <div id="loading"> 
      <img src="http://support.snapfish.com/euf/assets/images/answer_images/SpinningWheel.gif" /> 
     </div> 
     <div id="message"></div> 
    </div> 
    <div id="two"> <b>This is test one<br /></b> 
<b>This is test two<br /></b> 

    </div> 

的Javascript：

var elements = {}; 

function loadSpanContent() { 
    elements.loading.style.display = 'block'; // Show loading gif 

    spanContent = this.innerHTML 

    setTimeout(function() { 
     elements.message.innerHTML = "I should be printed on left side - " + spanContent; 
     elements.loading.style.display = 'none'; // Hide loading gif 
     alert("onclick Event detected! " + spanContent); 
    }, 1000); 
}  

window.onload = function mydisplayArray() { 
    var array = ['abc', 'xyz', 'mno']; 

    elements.loading = document.getElementById("loading"); 
    elements.one = document.getElementById("one"); 
    elements.message = document.getElementById("message"); 

    for (i = 0; i < array.length; i++) { 
     var span = document.createElement('span'); 
     span.innerHTML = array[i]; 
     span.onclick = loadSpanContent; 

     one.appendChild(span); 
    } 
}; 

這裏是一個小提琴：http://jsfiddle.net/nBaCJ/1/