javascript - jquery 单击时在 html 中出现另一个元素

Question

例如我有这个 html 代码:

<div class="product">
    <p>Name1<p>
</div>
<div class="product">   
    <p>Name2<p>
</div>
<div class="product">
    <p>Name3<p>
</div>
<div class="product">
    <p>Name4<p>
</div>
<div class="settings">
    <p>SETTINGS<p>
</div>

我将设置类设置为在 css 中不显示任何内容，除非我单击产品类中的 4 个 p 元素之一。单击后，设置类应显示在底部。

如果我点击例如 Name2 然后设置类出现在 Name2 之后而不是底部，我应该怎么做？

Answer 1

使用$(this)定位你点击的元素，结合insertAfter()将内容添加到这个元素。

运行下面的代码片段并单击具有类名 product 的任何元素以查看其工作原理。

$(".product").click(function(){
    $(".settings").insertAfter($(this));
});

    $(".product").click(function(){
       $(".settings").insertAfter($(this));
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
  <p>Name1
    <p>
</div>
<div class="product">
  <p>Name2
    <p>
</div>
<div class="product">
  <p>Name3
    <p>
</div>
<div class="product">
  <p>Name4
    <p>
</div>
<div class="settings">
  <p>SETTINGS
    <p>
</div>