添加div到父div没有重复

我有一个用户div，包含用户列表和onclick的任何用户我想要一个带有3个子div的div被附加到另一个父div。但是当尝试运行我的代码时，3当两个用户被点击时创建附加的div，当点击3个用户时创建5个附加的div，请帮助。下面是我的代码添加div到父div没有重复

<htmL> 
    <head> 
     <script src="js/jquery-1.11.1.min.js"></script> 
    </head> 
<style> 
.clear{ 
    clear:both: 
} 
.mainwrapper{ 
    width:700px; 
    border-style:solid; 
    bottom:5000px; 
    z-index:2; 
    margin-left:20px; 
    margin-top:150px; 
    //display:none; 
} 
.wrapper{ 
    height:300px; 
    width:300px; 
    border-style:solid; 
    float:left; 
} 
.wrapper1{ 
    height:90px; 
    width:280px; 
    border-style:solid; 
    margin:5px; 

} 
.wrapper11{ 
    height:50px; 
    width:80px; 
    border-style:solid; 
    float:left; 
} 
.wrapper12{ 
    height:50px; 
    width:190px; 
    border-style:solid; 
} 
.wrapper2{ 
    height:90px; 
    width:280px; 
    border-style:solid; 
    margin:5px; 
} 
.wrapper21{ 
    height:50px; 
    width:80px; 
    border-style:solid; 
    float:left; 
} 
.wrapper22{ 
    height:50px; 
    width:190px; 
    border-style:solid; 
} 

.wrapper3{ 
    height:90px; 
    width:280px; 
    border-style:solid; 
    margin:5px; 
} 
</style> 
<body> 
     <div class="user"> 
      <p><a href="#">first</a></p> 
      <p><a href="#">second</a></p> 
      <p><a href="#">thid</a></p> 

     </div> 

       <!----parent container----> 
        <div class="mainwrapper"> 


        </div> 
</body> 
<script> 

     $(".user").click(function() { 


     //alert('oko'); 

      create(); 

     }) 
     function create(){ 


      $('<div/>',{ class : 'wrapper'}).appendTo(".mainwrapper"); 

         $('<div/>',{ class : 'wrapper1'}).appendTo(".wrapper"); 


          $('<div/>',{ class : 'clear'}).appendTo(".wrapper1"); 

         $('<div/>',{ class : 'wrapper2'}).appendTo(".wrapper"); 

          $('<div/>',{ class : 'clear'}).appendTo(".wrapper2"); 

         $('<div/>',{ class : 'wrapper3'}).appendTo(".wrapper"); 

          $(".wrapper3").append('<form action="chatprocess.php?id="+"e"+" method="POST">'); 
           $(".wrapper3 form").append('<input type="text" placeholder="Name" name="a" id="rname"/>'); 
           $(".wrapper3 form").append('<br><input type="submit" name="submit" value="Send" />'); 
           $(".wrapper3 form").attr('action', 'chatprocess.php?send='+send+'&&rec='+user+'&&cat='+cat); 
           return user 
     } 

</script> 
</html>

来源

2017-08-13 Eaimie

也许创建一个JSFiddle。这样，问题就能更好地理解。 – JGFMK

您768,16一些独特的标签添加到您在创建新的div被添加到mainwrapper，从而将其与被点击的特定用户关联的包装类的名称。

为了在创建函数中传递标签（例如“user1”）。

然后将wrapper_user1命名为包装类，而不是仅包装器。

您的代码会发生什么情况是，当您单击第二和第三个用户时，当您追加到“包装器”时，它会追加到您添加的新包装器，但也会添加到您之前通过单击用户1创建的包装器和2.

wrapper3也是如此。我建议你用相应的用户标记所有的包装，以防添加更多功能。

如果您只想在第一级包装中保留标签，您需要通过在jQuery选择器中预先添加相应的标记包装来更改如何选择不同的元素。

注意：还请检查您的代码。 js有一些语法错误和未定义的变量。 Css也有语法错误。

$(".user a").click(function() { 
 
    //alert('oko'); 
 
    var tag = $(this).attr('data-tag'); 
 
    create(tag); 
 
}); 
 

 

 
function create(tag) { 
 
    var newClass = 'wrapper_' + tag; 
 
    
 
    //Declared for snippet to work 
 
    var send =""; 
 
    var user=""; 
 
    var cat=""; 
 
    //---------- 
 
    
 
    $('<div/>', { 
 
    class: newClass 
 
    }).appendTo(".mainwrapper"); 
 
    $('<div/>', { 
 
    class: 'wrapper1 wrapper1_' + tag 
 
    }).appendTo("." + newClass); 
 

 
    $('<div/>', { 
 
    class: 'clear' 
 
    }).appendTo(".wrapper1_" + tag); 
 
    $('<div/>', { 
 
    class: 'wrapper2 wrapper2_' + tag 
 
    }).appendTo("." + newClass); 
 

 
    $('<div/>', { 
 
    class: 'clear' 
 
    }).appendTo(".wrapper2_" + tag); 
 
    $('<div/>', { 
 
    class: 'wrapper3 wrapper3_' + tag 
 
    }).appendTo("." + newClass); 
 

 
    $(".wrapper3_" + tag).append('<form action="chatprocess.php?id="+"e"+" method="POST">'); 
 
    $(".wrapper3_" + tag + " form").append('<input type="text" placeholder="Name" name="a" id="rname"/>'); 
 
    $(".wrapper3_" + tag + " form").append('<br><input type="submit" name="submit" value="Send" />'); 
 
    $(".wrapper3_" + tag + " form").attr('action', 'chatprocess.php?send=' + send + '&&rec=' + user + '&&cat=' + cat); 
 
    return user; 
 
}

.clear { 
 
    clear: both; 
 
} 
 

 
.mainwrapper { 
 
    width: 700px; 
 
    border-style: solid; 
 
    bottom: 5000px; 
 
    z-index: 2; 
 
    margin-left: 20px; 
 
    margin-top: 150px; 
 
    //display:none; 
 
} 
 

 
.wrapper { 
 
    height: 300px; 
 
    width: 300px; 
 
    border-style: solid; 
 
    float: left; 
 
} 
 

 
.wrapper1 { 
 
    height: 90px; 
 
    width: 280px; 
 
    border-style: solid; 
 
    margin: 5px; 
 
} 
 

 
.wrapper11 { 
 
    height: 50px; 
 
    width: 80px; 
 
    border-style: solid; 
 
    float: left; 
 
} 
 

 
.wrapper12 { 
 
    height: 50px; 
 
    width: 190px; 
 
    border-style: solid; 
 
} 
 

 
.wrapper2 { 
 
    height: 90px; 
 
    width: 280px; 
 
    border-style: solid; 
 
    margin: 5px; 
 
} 
 

 
.wrapper21 { 
 
    height: 50px; 
 
    width: 80px; 
 
    border-style: solid; 
 
    float: left; 
 
} 
 

 
.wrapper22 { 
 
    height: 50px; 
 
    width: 190px; 
 
    border-style: solid; 
 
} 
 

 
.wrapper3 { 
 
    height: 90px; 
 
    width: 280px; 
 
    border-style: solid; 
 
    margin: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="user"> 
 
    <p><a data-tag="user1" href="#">first</a></p> 
 
    <p><a data-tag="user2" href="#">second</a></p> 
 
    <p><a data-tag="user3" href="#">thid</a></p> 
 
</div> 
 

 
<!----parent container----> 
 
<div class="mainwrapper"></div>

来源

2017-08-13 14:06:53 Juan

谢谢，我真的很感激 – Eaimie

有要在其中追加//一个DIV组加3格，这样的事情：

<div id='parentDiv'> 
     <!-- place where 3 DIVs will be inserted --> 
    </div>

某处你将有一个click事件三种文本要添加一个onClick事件到所有文本：

<div> 
     <a class = 'clickMe' onclick="myFunction()">one</a></div></br> 
     <a class = 'clickMe'onclick="myFunction()">two</a></br> 
     <a class = 'clickMe'onclick="myFunction()">three</a></br> 
    </div>

在脚本标签定义字符串有一个父DIV中3个的DIV，像这样：

var divWith3ChildDiv = '<div><div style="background-color:blue;">this is 1st added DIV</div><div style="background-color:red;">2nd Added DIV</div><div style="background-color:pink;">3rd added DIV</div></div>';//a parent DIV with 3 DIVs inside it

然后你可以将使用innerHTML方法来添加上述定义为HTML字符串的onClick事件函数到'parentDiv'

var getElements = document.getElementsByClassName('clickMe'); 
    var myDiv = document.getElementById('parentDiv'); 

    function myFunction(){ 
    myDiv.innerHTML = divWith3ChildDiv; 
    }

来源

2017-08-13 14:28:26

添加div到父div没有重复

回答

相关问题