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:在左侧单击“abc”，旋转圆圈应显示1秒钟，然后显示“我应该在左侧打印”。再次单击“mno”时，第一个旋转圆圈应显示1秒钟，然后显示“我应该在左侧打印”文本。小提琴的工作版本为onclick。

Answer 1

你应该对每个隐藏和显示加载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/

Answer 2

我仍然对你在这里想要的东西感到困惑，但如果你想让加载消息在一秒后消失，你应该使用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/

BTW：如果你希望你的加载gif出现在你的内容上，那么在css中设置它的position:absolute，但请注意你的gif有一个白色而不是透明的背景，所以它会模糊你的内容。

Answer 3

您的要求不清楚。

但首先，您应该修复这两个功能：

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

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

旋转圆圈点击

3 个答案: