添加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沒有重複

回答

相關問題