个人中心
gpt4 book ai didi

javascript - 使用子 div 清空和重新填充 div

转载 作者：行者123 更新时间：2023-11-28 05:52:25 25 4
gpt4 key购买 nike

我有一个主分区。我用很多子 div 填充它(每个包含一个词)(单击导入文本)我有一个子 div 的“onclick”功能，它允许用户选择它们(它们改变颜色)，以及许多其他时髦的东西然后我清除主 div(我尝试将 innerHTML 设置为“”或循环杀死 child )然后我再次用子 div 重新填充主 div(再次单击导入文本)这一次，当我单击“子项”时，尽管在 Debug模式 (F12) 下它们似乎收到了事件并且它们的背景颜色以编程方式更改，但它在视觉上并没有改变!!

  <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
    body {
        font-family: tahoma;
        font-size: 12pt;
    }

    .t {
        width:800px; 
        height:300px; 
        background-color:#FFF;
        border: solid 1px #CCF;
    }

    .m {
        width:800px; 
        height:300px; 
        background-color:#EFF;
        border: solid 1px #CCF;

    }

    .d {
        float: left;    
        border-right: solid 1px #CCF;
        border-bottom: solid 1px #CCF;
        padding-left:2px;
        padding-right: 2px;

    }

    .but {
        width:100px;
    }
    </style>
    <script src="../fdlnew.js"></script>
    <script>

    var ss = null;

    function subImport() {
        ss.importText(document.getElementById("textBox").value);
    }



    function doit() {
        document.getElementById("divStat").style.visibility="hidden";

        divMain = document.getElementById("divMain");
        ss = new subit(divMain);
    }    




    function stat (s) {
            statDiv = document.getElementById("divStat");
            statDiv.innerHTML += s + "<br>";        
            statDiv.scrollTop = statDiv.scrollHeight;
    }



    function subit (divMain) {    

        bigThis = this;
        this.divMain    = divMain;
        // some color constants        

        nbg = "#EFF";
        hbg = "orange";                                                
        sbg = "#AFA";
        cbg = "#AAF";

        // the main word object array
        this.warr = [];


        this.importText = function(txt) {
            while ( this.divMain.firstChild ) 
                this.divMain.removeChild( this.divMain.firstChild );

            var parts = txt.split(" ");

            for (i=0; i<parts.length; i++) {
                this.warr[this.warr.length] = new word(i, parts[i], this.divMain);
            }
        }


        function word(id, txt, container) {
            this.txt = txt;
            this.id = id;
            this.div = document.createElement('div');
            this.div.innerHTML = this.txt; //  + "&nbsp;" 
            this.div.className = "d";
            this.div.setAttribute("id", "d" + this.id);
            divMain.appendChild(this.div);
            this.timestamp = 0;

            this.isLastSelected = false;
            this.isSelected = false;
            this.steppedOn = false;

            this.div.onclick = function ()  {
                thisId = parseInt(this.id.substr(1));
                bigThis.warr[thisId].gotClicked();
            }

        }

        word.prototype.gotClicked = function () {

            gLastSel = -1;

            // FIRST, fix ME!!
            if (!this.isSelected) {
                this.isSelected = true;
                this.isLastSelected = true;
                gLastSel = this.id;
            } else {
                this.isSelected = false;
                this.isLastSelected = false;
                gLastSel = -1;
            }
            this.setBG();

            // now we check the others ...
            var nowLastSel = -1;
            for (i=0; i<bigThis.warr.length; i++) {
                if (bigThis.warr[i].id != this.id && bigThis.warr[i].isSelected ) {
                    if (!event.ctrlKey && this.isSelected) {
                        bigThis.warr[i].isSelected = false;
                        bigThis.warr[i].isLastSelected = false;
                    } else {
                        if (bigThis.warr[i].isLastSelected) {
                            if (gLastSel == -1)  gLastSel = i;
                            else                bigThis.warr[i].isLastSelected = false;
                        }


                        nowLastSel = i;
                    }
                }
                bigThis.warr[i].setBG();
            }
            if (gLastSel==-1)   gLastSel = nowLastSel;
            if (gLastSel!=-1) {
                bigThis.warr[gLastSel].isLastSelected = true;
                bigThis.warr[gLastSel].setBG();
            }
        }

        word.prototype.stepOn = function (ts) {
            if (wordCurStep!=-1) 
                bigThis.warr[wordCurStep].stepOff();

            this.timestamp = ts;
            this.steppedOn = true;
            wordCurStep = this.id;
            this.setBG();
        }

        word.prototype.stepOff = function () {
            this.steppedOn = false;
            this.setBG();
            wordCurStep = -1;
        }

        word.prototype.setBG = function () {
            var bgcol = nbg;
            if (this.steppedOn) {
                bgcol  = hbg;
            } else {
                if (this.isSelected) 
                    bgcol = this.isLastSelected ? cbg : sbg;
            }
            this.div.style.backgroundColor = bgcol;
        }

        word.prototype.getText = function() {   return(this.txt);                       }
        word.prototype.setStamp = function(stamp) { this.stamp = stamp;                 }    
        word.prototype.getStamp = function() {  return(this.stamp);                     }

    }



    </script>
    </head>

    <body  onload = "doit();">

    1. Paste Text Here: <br>
    <textarea  id="textBox" class="t" rows="10" >
    Marconi was born in Bologna in 1874. From 1890 to 1893, he studied physics at the technical school in Livorno. 
    In 1894 he started experimenting with radio waves and discovered how to transmit them over short distances. 
    Unfortunately he did not receive much encouragement in Italy and his English relatives advised him to go to Britain. 
    In February 1896 he arrived in London where the British Post Office provided him with facilities to continue his research.
    </textarea><br>
    <input type="button" value="Import Text"   class="but"     onclick="subImport();">



        <div id="divMain" class="m"></div>

    </body>
    </html>

最佳答案

您的问题是 warr 数组。单击“导入文本”按钮时，文本中的单词将被推送到 warr 中，但如果 warr 中已经有单词，则不会将其删除。每当调用 subit.importText 时，您都必须重置 warr:

this.importText = function(txt) {
    this.warr = [];

    // ...
}

See jsFiddle 

var ss = null;

function subImport() {
    ss.importText(document.getElementById("textBox").value);
}


function doit() {
    document.getElementById("divStat").style.visibility = "hidden";

    divMain = document.getElementById("divMain");
    ss = new subit(divMain);
}
doit(); // instead of <body onload="doit();">


function stat(s) {
    statDiv = document.getElementById("divStat");
    statDiv.innerHTML += s + "<br>";
    statDiv.scrollTop = statDiv.scrollHeight;
}



function subit(divMain) {

    bigThis = this;
    this.divMain = divMain;
    
    // some color constants
    nbg = "#EFF";
    hbg = "orange";
    sbg = "#AFA";
    cbg = "#AAF";

    // the main word object array
    this.warr = [];


    this.importText = function(txt) {
    	this.warr = []; // Was missing!
    
        while (this.divMain.firstChild)
            // using innerHTML would be fine too!
            this.divMain.removeChild(this.divMain.firstChild);

        var parts = txt.split(" ");

        for (i = 0; i < parts.length; i++) {
            // why not use this.warr.push() ?
            this.warr[this.warr.length] = new word(i, parts[i], this.divMain);
        }
    }


    function word(id, txt, container) {
        this.txt = txt;
        this.id = id;
        this.div = document.createElement('div');
        this.div.innerHTML = this.txt; //  + "&nbsp;" 
        this.div.className = "d";
        this.div.setAttribute("id", "d" + this.id);
        divMain.appendChild(this.div);
        this.timestamp = 0;

        this.isLastSelected = false;
        this.isSelected = false;
        this.steppedOn = false;

        this.div.onclick = function() {
            thisId = parseInt(this.id.substr(1));
            bigThis.warr[thisId].gotClicked();
        }

    }

    word.prototype.gotClicked = function() {

        gLastSel = -1;

        // Here is no problem!
        if (!this.isSelected) {
            this.isSelected = true;
            this.isLastSelected = true;
            gLastSel = this.id;
        } else {
            this.isSelected = false;
            this.isLastSelected = false;
            gLastSel = -1;
        }
        this.setBG();

        // now we check the others ...
        var nowLastSel = -1;
        for (i = 0; i < bigThis.warr.length; i++) {
            if (bigThis.warr[i].id != this.id && bigThis.warr[i].isSelected) {
                if (!event.ctrlKey && this.isSelected) {
                    bigThis.warr[i].isSelected = false;
                    bigThis.warr[i].isLastSelected = false;
                } else {
                    if (bigThis.warr[i].isLastSelected) {
                        if (gLastSel == -1) gLastSel = i;
                        else bigThis.warr[i].isLastSelected = false;
                    }


                    nowLastSel = i;
                }
            }
            bigThis.warr[i].setBG();
        }
        if (gLastSel == -1) gLastSel = nowLastSel;
        if (gLastSel != -1) {
            bigThis.warr[gLastSel].isLastSelected = true;
            bigThis.warr[gLastSel].setBG();
        }
    }

    word.prototype.stepOn = function(ts) {
        if (wordCurStep != -1)
            bigThis.warr[wordCurStep].stepOff();

        this.timestamp = ts;
        this.steppedOn = true;
        wordCurStep = this.id;
        this.setBG();
    }

    word.prototype.stepOff = function() {
        this.steppedOn = false;
        this.setBG();
        wordCurStep = -1;
    }

    word.prototype.setBG = function() {
        var bgcol = nbg;
        if (this.steppedOn) {
            bgcol = hbg;
        } else {
            if (this.isSelected)
                bgcol = this.isLastSelected ? cbg : sbg;
        }
        this.div.style.backgroundColor = bgcol;
    }

    word.prototype.getText = function() {
        return (this.txt);
    }
    word.prototype.setStamp = function(stamp) {
        this.stamp = stamp;
    }
    word.prototype.getStamp = function() {
        return (this.stamp);
    }

}
body {
    font-family: tahoma;
    font-size: 12pt;
}

.t {
    width: 800px;
    height: 300px;
    background-color: #FFF;
    border: solid 1px #CCF;
}

.m {
    width: 800px;
    height: 300px;
    background-color: #EFF;
    border: solid 1px #CCF;
}

.d {
    float: left;
    border-right: solid 1px #CCF;
    border-bottom: solid 1px #CCF;
    padding-left: 2px;
    padding-right: 2px;
}

.but {
    width: 100px;
}
1. Paste Text Here:
<br>
<textarea id="textBox" class="t" rows="10">
    Marconi was born in Bologna in 1874. From 1890 to 1893, he studied physics at the technical school in Livorno. In 1894 he started experimenting with radio waves and discovered how to transmit them over short distances. Unfortunately he did not receive
    much encouragement in Italy and his English relatives advised him to go to Britain. In February 1896 he arrived in London where the British Post Office provided him with facilities to continue his research.
</textarea>
<br>
<input type="button" value="Import Text" class="but" onclick="subImport();">



<div id="divMain" class="m"></div>

<!-- id=divStat needed so no error is encountered -->
<div id="divStat">Hidden!</div>

关于javascript - 使用子 div 清空和重新填充 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37252397/

25 4 0
文章推荐： c++ - 用于控制 LPT 的 hwinterface.sys 在哪里？
文章推荐： html - 手机调整大小 [html]
文章推荐： javascript - 删除移动 View 粘性js上的粘性导航栏
文章推荐： javascript - 制作一个 div 滚动以显示位于下方的主要内容
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com