javascript
  • jquery
  • append
  • 2013-05-01 59 views 0 likes 
    0

    我有格jQuery的添加新的div的onclick

    <li class="comment"> 
        <div class="comment-body" id="comment-body"> 
          <div class="comment-author vcard"> 
           <div class="lightbox-photo"> 
            <a class="image-overlay" href='<%# "Foto/profil/foto_buyuk/" + Eval("Yorum_Profil_Foto_Buyuk") %>' data-rel="prettyPhoto" title='<%# Eval("Yorum_UserName")%>'><img src='<%# "Foto/profil/foto_kucuk/" + Eval("Yorum_Profil_Foto_Kucuk") %>' alt='<%# Eval("Yorum_UserName")%>' class="avatar" /> 
            </a> 
           </div> 
           <cite class="fn"><asp:HyperLink ID="linkProfil" runat="server" Text='<%# Eval("Yorum_UserName")%>' NavigateUrl='<%# "~/profil.aspx?user_id="+Eval("User_ID") %>'></asp:HyperLink></cite> 
           <cite class="fn-time"></cite> 
           </div> 
         <p><%# Eval("Yorum_Text")%></p> 
          </div> 
         </div> 
        </div> 
    </li> 
    

    我想加上DIV點擊一個新的div的列表。我寫了jquery代碼,但它不起作用。

    function addcommentdiv() { 
        var NewContent = '<div class=""><input name="name" type="text" id="name" size="20" value="" style="height:20px; margin-top:10px; width:480px;margin-left:90px; font-size:14px;" /></div>' 
        $('.comment-body').click(function() { 
    
         var index2 = $('.comment-body').index(this); 
         if (NewContent != '') { 
          $('.comment-body').eq(index2).after(NewContent); 
          NewContent = ''; 
    
         } 
         else { 
          $('.comment-body').eq(index2).next().toggle(); 
    
         } 
    
        }); 
    
    }; 
    

    爲什麼它不工作,或者如何添加一個新的div來點擊下面的div(如twitter回覆)?我寫了一些代碼之前。它正在工作,但有一個問題:它只爲一個div工作。

    +1

    查找到http://api.jquery.com/append/ – 2013-05-01 16:03:52

    +1

    是誰喊'addcommentdiv()' – 2013-05-01 16:06:52

    +0

    你需要調用''addcommentdiv上準備好像'$(function(){addcommentdiv();})'。除此之外,它看起來很好http://jsfiddle.net/arunpjohny/7gyrB/1/ – 2013-05-01 16:08:10

    回答

    3

    嘗試

    function addcommentdiv() { 
        var NewContent = '<div class="reply"><input name="name" type="text" id="name" size="20" value="" style="height:20px; margin-top:10px; width:480px;margin-left:90px; font-size:14px;" /></div>' 
        $('.comment-body').click(function() { 
         var $this = $(this), $reply = $this.next('.reply'); 
    
         if ($reply.length) { 
          $reply.toggle(); 
         } else { 
          $(NewContent).insertAfter($this); 
         } 
        }); 
    }; 
    

    演示:Fiddle

    +1

    再次感謝。併爲我的壞英語感到抱歉。 – serdar 2013-05-01 16:27:51

    +0

    我可以再問一個問題@阿倫:我不能得到答覆的顯示。 var cevapladisplay = $ reply.css('display');此代碼返回undefined.how我可以得到css顯示屬性的值 – serdar 2013-05-01 18:24:56

    0

    我不是太熟悉jQuery的,但你可以通過JavaScript添加一個新的div

    var NewContent = '<div class=""><input name="name" type="text" id="name" size="20"   value="" style="height:20px; margin-top:10px; width:480px;margin-left:90px; font- size:14px;" /></div>' 
    
    
    $('.comment-body').click(function() { 
    var newdiv=document.creatElement(NewContent); 
    var toattach= document.getElementById('comment-body'); 
    toattach.appendchild(newdiv) ; 
    } 
    else { 
        $('.comment-body').eq(index2).next().toggle(); 
    
    } 
    

    });

    +4

    我看到一個沒有「if」的「else」。 – Pino 2013-05-01 16:13:35

    相關問題