divの下にボタンを追加する方法onclick

Question

ディスプレイを使用して、複数のdivカードを並べて表示します：インラインブロックです。カードをクリックすると、ボタン以下 div。

jqueryのafter（）関数を使用していますが、divの右にボタンを追加しています。

どうすればいいですか？

PS：私は追加機能を使用しようとしましたが、divを再度クリックするとボタンを削除する別の機能があるため、ボタンをクリックするとdivのようになりますdivをクリックしてボタンが削除されているため、機能しません。

ありがとうございました！

が回答をいただき、誠にありがとうござい

編集... ...

は

申し訳ありませんが、コードを示していないため、ここにある：

<div class = "classOfDiv"> 
     here goes some product characteristics 
    </div> 


$('.classOfDiv').click(
    function() { 
     //gets the border because I need it to see if I'm clicking for the first time or second time. 
     var border = $(this).css("border"); 

     //checks the border 
     if (border == "0px none rgb(51, 51, 51)") { 
      //change the border style to say that the div has been clicked 
      $(this).css("border", "3px solid blue"); 
      //add the button 
      $(this).after("<button name = 'btnDetalhes' class = 'btn btn-primary'>Detalhes</button>"); 
     } else { 
      //remove the border (now the div is diselected) 
      $(this).css("border", "0px none rgb(51, 51, 51)"); 
      //remove the button 
      $(this).next("[name='btnDetalhes']").remove(); 
     } 
    } 
); 

Answer 1

が、ここで私がショー/隠しで示唆されたものを実行する方法のために本当にラフな概念であり、 。

ボタンのdivを「隠す」ように指定する必要があります。それは、再びカードをクリックする必要がある場合は、単に会話を1としてtoggle

.card { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    margin: 5px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    } 
 

 
.card-button { 
 
    display: none; 
 
    position: absolute; 
 
    bottom: -22px; 
 
    left: -1px; 
 
    width: 100%; 
 
    height: 20px; 
 
    border: 1px solid red; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="card" onclick="$('.card-button').show()"> 
 
    <p>Card Content</p> 
 
    <div class="card-button" onclick="alert('button clicked!')"> 
 
     <span>BUTTON</span> 
 
    </div> 
 
    </li> 
 
</ul>

にshow()を変更、代替ソリューションは、上のクリックを保つために、あなたのイベントハンドラでevent.stopPropogation()を使用することですボタンが他の親のクリックイベントを引き起こすのを防ぎます。

Answer 2

私が書きました前のフォーラムのためのスポイラーBBCodes;コンセプトは本質的に同じであるので、それらを反転し、あなたが得る：あなたはまだ、実際の答えを持っていないので

<span> 
<div onclick="var s=this.parentNode.querySelector('button');s.style.display=s.style.display==''?'none':''"> 
<!-- put stuff here --> 
</div> 
<button type="button" style="display:none"><!-- put other stuff here --></button> 
</span> 

Answer 3

$(document).ready(function() { 
 
    
 
    
 
    $(".card").click(function() { 
 
    \t $(this).append('<a class="button" href="#">Button</a>'); 
 
\t }); 
 
    
 
    \t 
 
});

.card{ 
 
    display:inline-block; 
 
    position:relative; 
 
    width:200px; 
 
    height:100px; 
 
    margin-bottom:40px; 
 
    background-color:yellow; 
 
} 
 

 
.button{ 
 
    position: absolute; 
 
    bottom: -30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 

 
<div class="card">a</div> 
 
<div class="card">b</div> 
 
<div class="card">c</div> 
 
<div class="card">d</div> 
 
<div class="card">e</div> 
 
<div class="card">f</div> 
 
<div class="card">g</div>