Question

我有一堆div卡，并排使用显示屏：inline-block，我想要做的就是当我点击一张卡片时，它会在下方添加一个按钮 / strong> div。

我使用jquery的after（）函数来执行此操作，但是它将按钮添加到div的右侧。

拜托，我该怎么办？

PS：我尝试使用append函数，但是当我再次单击div时，我还有另一个删除按钮的功能，所以当我点击按钮（现在是div的一部分）时，它就是＆＃39;就像你点击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的内容。如果它应该再次点击该卡，则只需将show()更改为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>

根据对话，另一种解决方案是在事件处理程序中使用event.stopPropogation()来保持点击按钮不会触发其他父级点击事件。

Answer 2

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

.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>

Answer 3

我之前为论坛写过剧透BBC代码;这个概念本质上是相同的，所以翻转它们就可以得到：

<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>

如何在div下面添加一个按钮onclick

3 个答案: