10

我创建了一个简单的页面来在每次按下提交时更改 div id。我的问题是这从 div_top1 -> div_top2 发生了变化，但是我第二次按下按钮时，它停止了变化:(

<!DOCTYPE html>
<html>
    <head>
        <script>   
            function changediv()
            {                                                    
                document.getElementById("div_top1").innerHTML=Date();          
                document.getElementById("div_top1").setAttribute("id", "div_top2");
                document.getElementById("div_top2").innerHTML="teste";            
                document.getElementById("div_top2").setAttribute("id", "div_top1");
            }
        </script>

        <style>
            .top {               
                background-color: navy;    
                color: white;
                padding: 10px 10px 10px 10px;   
                margin: 5px 5px 5px 5px;                                 
            }

            .down {             
                background-color: aqua;
                padding: 10px 10px 10px 10px;
                margin: 5px 5px 5px 5px;        
            }         
        </style>

    </head>
    <body>
        <div id="div_top1" class="top">This is a paragraph.</div>
        <div class="down"><button type="button" onclick="changediv()">Display Date</button></div>
    </body>
</html>
4

3 回答 3

20

Working FIDDLE Demo

尝试这个：

function changediv()
{   

    if (document.getElementById("div_top1")) {
        document.getElementById("div_top1").innerHTML=Date();          
        document.getElementById("div_top1").setAttribute("id", "div_top2");
    }
    else {
        document.getElementById("div_top2").innerHTML="teste";            
        document.getElementById("div_top2").setAttribute("id", "div_top1");
    }


}
于 2013-05-16T10:03:41.797 回答
3

问题不在于不断变化的 id - 而是您每次都在双向更改它。你需要一个 if 条件。您还应该使用 .id 来更改 id 而不是 setAttribute() - 我在过去（多年前）使用 setAttribute 更改 id 时遇到过一些浏览器的问题。

演示：http: //jsfiddle.net/x2nPY/

function changediv() {
    if (document.getElementById("div_top1")) {
        document.getElementById("div_top1").innerHTML = Date();          
        document.getElementById("div_top1").id = "div_top2";
    } else {
        document.getElementById("div_top2").innerHTML = "teste";            
        document.getElementById("div_top2").id = "div_top1";
    }
}
于 2013-05-16T10:04:51.317 回答
1

例如，如果您想在每次提交时切换或更改它，您可以使用：

function changediv() {                                           
if (document.getElementById("div_top1"))
 {
    document.getElementById("div_top1").innerHTML=Date();          
    document.getElementById("div_top1").setAttribute("id", "div_top2");

 }
 else
 {
    document.getElementById("div_top2").innerHTML="teste";            
    document.getElementById("div_top2").setAttribute("id", "div_top1");
 }

}

查看小提琴演示

于 2013-05-16T10:07:47.517 回答