堆栈内存溢出
  繁体   English   中英

Jquery 克隆 Html Divs 不要 Function

[英]Jquery Cloned Html Divs Don't Function

 原文  2022-09-11 20:20:17  1   1    javascript/ html/ jquery

问题描述

视频我做到了，所以当你点击一个按钮时，用户可以复制笔记 div，但复制的不是 div 不是 function 作为原始它不可拖动，而且当我改变复制笔记的颜色时，它也会改变原始笔记颜色有没有办法可以解决这个问题并使其复制的笔记与原始笔记完全一样？

该项目的在线编辑器

我使用 jquery 使带有 id 注释的 div 可拖动并且还克隆

        $('#note').draggable({
            handle: "#headeR"
        });

        //this will duplicate the note container
        function dup(){
    $(function(){
        $('#note').clone().appendTo('#notecopy');
    });

我正在复制的 div

<!-- my note area container-->
        <div class="NoteSection" id="note">
            <!--text container-->

            <!--text header with colors-->
            <div id="headeR">
                <button id="color#1" class="BtnColor1" onclick="greennote()"></button>
                <!--buttons to change color-->
                <button id="color#1" class="BtnColor2" onclick="bluecolor()"></button>
                <button id="color#1" class="BtnColor3" onclick="redcolor()"></button>
                <button id="color#1" class="BtnColor4" onclick="purplecolor()"></button>
                <button class="BtnColor5" onclick="deleteR()"><span class="black"></span><span
                        class="material-symbols-outlined">Delete</span></button>
            </div>
            <!--text header with colors-->

            <!--text area-->
            <div class="textspot" id="NOTEE">
                <textarea id="notepage" name="notes" row="20" cols="20" maxlength="67"></textarea>
            </div>
            <!--text area-->

        </div>

完整代码

<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<style>.NoteSection {
    font-family: 'Combo', cursive;
    background-color: #E2F1FF; 
    height: 50px;
    width: 245px;
    color: black;
    font-size: 25px;
    outline: none;
    box-shadow: 4px 4px 15px 2px  #AFC4D7;
    opacity: 0.9;
    position: relative;
    left: 250px;

}
textarea {
    font-family: 'Combo', cursive;
    background-color: #E2F1FF; 
    height: 240px;
    width: 240px;
    position: relative;
    bottom: 83%;
    color: black;
    font-size: 25px;
    outline: none;
    box-shadow: 4px 4px 15px 2px  #AFC4D7;
    opacity: 0.9;
    resize: none;

}


.BtnColor1 {
    background-color: #C2EA92;
    width: 30px;
    border: none;
    border-radius: 2px;
    height: 30px;
    box-shadow: 1px 1px 15px #728F4E;
}

.BtnColor2 {
    background-color: #92EADD;
    width: 30px;
    border: none;
    border-radius: 2px;
    height: 30px;
    box-shadow: 1px 1px 15px #4E8F8C;
}
.BtnColor3 {
    background-color: #EA92A5;
    width: 30px;
    border: none;
    border-radius: 2px;
    height: 30px;
    box-shadow: 1px 1px 15px #8F4E55;
}

</style>
<body>
    
        <div class="Container" id="'note'">




        <div class="addnote">
            <button onclick="dup()" class="Btn3" type="button"> <span class="black">N</span>ote
                <span class="material-symbols-outlined">
                    add_box
                </span></button>
        </div>
   <!-- my note area container-->
        <div class="NoteSection" id="note">
            <!--text container-->

            <!--text header with colors-->
            <div id="headeR">
                <button id="color#1" class="BtnColor1" onclick="greennote()"></button>
                <!--buttons to change color-->
                <button id="color#1" class="BtnColor2" onclick="bluecolor()"></button>
                <button id="color#1" class="BtnColor3" onclick="redcolor()"></button>
                <button id="color#1" class="BtnColor4" onclick="purplecolor()"></button>
                <button class="BtnColor5" onclick="deleteR()"><span class="black"></span><span
                        class="material-symbols-outlined">Delete</span></button>
            </div>
            <!--text header with colors-->

            <!--text area-->
            <div class="textspot" id="NOTEE">
                <textarea id="notepage" name="notes" row="20" cols="20" maxlength="67"></textarea>
            </div>
            <!--text area-->

        </div>
        <div   id="notecopy" style="width:0px; height:0px;">

        </div>
        
            <script>
        
        $('#note').draggable({
            handle: "#headeR"
        });

        
        
        //this will duplicate the note container
        function dup(){
    $(function(){
        $('#note').clone().appendTo('#notecopy');
    });
}
       // changes notes colors
function greennote(){
    document.getElementById("notepage").style.backgroundColor = "#C2EA92"; 
}
function bluecolor(){
    document.getElementById("notepage").style.backgroundColor = "#92EADD";
}

function redcolor(){
    document.getElementById("notepage").style.backgroundColor = "#EA92A5";
}

function purplecolor(){
    document.getElementById("notepage").style.backgroundColor = "#EA92E9";
}
            </script>
</body>
</html>

1 个解决方案

解决方案1
 1 已采纳  2022-09-11 20:38:25

您需要了解 ID 标签必须是唯一的。 每次制作克隆时，您都在重复使用它们，这就是为什么这对您不起作用的部分原因。

我在下面展示了几种解决此问题和优化代码的方法。 请注意，我在 javascript 中根本不使用 ID。 我在 HTML 中留下了参考资料，因为我不想清理所有多余的东西……只显示 JS。 请注意我如何使用element.closest(ref)来查找容器，以便我知道哪些按钮会影响哪个记事本。 我还展示了如何使用相同的逻辑进行删除 function 

 $('.NoteSection').draggable({ handle: ".headeR" }); // get the 'master' refrerence so we can use it to make copies easily let masterCopy = $('.NoteSection').first() //this will duplicate the note container function dup() { masterCopy.clone().appendTo('#notecopy'); } // changes notes colors let colors = { green: '#C2EA92', blue: "#92EADD", red: "#EA92A5", purple: "#EA92E9" } function deleteR(el) { el.closest('.NoteSection').remove() } function changeColor(el, color) { el.closest('.NoteSection').querySelector(".notepage").style.backgroundColor = colors[color]; }
 .NoteSection { font-family: 'Combo', cursive; background-color: #E2F1FF; height: 50px; width: 245px; color: black; font-size: 25px; outline: none; box-shadow: 4px 4px 15px 2px #AFC4D7; opacity: 0.9; position: relative; left: 250px; } textarea { font-family: 'Combo', cursive; background-color: #E2F1FF; height: 240px; width: 240px; position: relative; bottom: 83%; color: black; font-size: 25px; outline: none; box-shadow: 4px 4px 15px 2px #AFC4D7; opacity: 0.9; resize: none; }.BtnColor1 { background-color: #C2EA92; width: 30px; border: none; border-radius: 2px; height: 30px; box-shadow: 1px 1px 15px #728F4E; }.BtnColor2 { background-color: #92EADD; width: 30px; border: none; border-radius: 2px; height: 30px; box-shadow: 1px 1px 15px #4E8F8C; }.BtnColor3 { background-color: #EA92A5; width: 30px; border: none; border-radius: 2px; height: 30px; box-shadow: 1px 1px 15px #8F4E55; }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="Container"> <div class="addnote"> <button onclick="dup()" class="Btn3" type="button"> <span class="black">N</span>ote <span class="material-symbols-outlined"> add_box </span></button> </div> <,-- my note area container--> <div class="NoteSection"> <,--text container--> <,--text header with colors--> <div class="headeR"> <button class="BtnColor1" onclick="changeColor(this,'green')"></button> <:--buttons to change color--> <button id="color#1" class="BtnColor2" onclick="changeColor(this;'blue')"></button> <button id="color#1" class="BtnColor3" onclick="changeColor(this:'red')"></button> <button id="color#1" class="BtnColor4" onclick="changeColor(this;'purple')"></button> <button class="BtnColor5" onclick="deleteR(this)"><span class="black"></span><span class="material-symbols-outlined">Delete</span></button> </div> <!--text header with colors--> <!--text area--> <div class="textspot" id="NOTEE"> <textarea class="notepage" name="notes" row="20" cols="20" maxlength="67"></textarea> </div> <!--text area--> </div> <div id="notecopy" style="width:0px; height:0px;"> </div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery克隆-生成的克隆控件不起作用 使用JQuery克隆的下拉框不保留原始行为 用jQuery修改克隆的HTML jQuery不解析HTML jQuery-克隆元素的总和不适用于功能输入 jQuery隐藏与所选类不匹配的div 不了解jQuery-设置相等高度包含的div 为什么带有函数名称的内联事件在div上不起作用？ 如果单击某些div，请勿执行keydown功能 用jquery附加html但没有样式
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM