无法检测到点击了哪个 div

Question

我希望每个 li 标记都在 div 中的 li 标记下方显示 a 点击的 href 内容。例如，我有这样的结构：

<ul id="ids">
<li class="res"><a class="item">item1</a></li>
<li class="res"><a class="item">item2</a></li>
<li class="res"><a class="item">item3</a></li>
</ul>

如果点击了a的href，则需要显示一个在<a>标签之外显示div <div class="testing"><h3>showing item1 here</h3></div>的函数。该功能可能需要一些时间，因此在此之前需要显示正在加载...。但是我无法检测到用户单击的位置，因为类名相同。加载完成后，应该隐藏加载。

到目前为止，我有这个：

$(document).on('click', '.item', function(e) {
  e.preventDefault();
$(this).append('Loading');

//function code here

$(this).append('<div class="testing"><h3>showing item1 here</h3></div>');
});

此外，该函数附加了 1 个带有“mydiv”类的 div 标签，需要隐藏。但同样，由于附加到每个 <li> 的类名是相同的，我不知道点击发生在哪里来检测它。

总结：

• 显示具有锚标记的元素列表
• 点击每个元素应在该锚标记下的 div 中显示点击内容
• 锚标记的内容可能需要 2 秒，因此在此之前用户应该会看到“正在加载”。加载后，应隐藏加载

Answer 1

您正在寻找$.after() 或$.insertAfter()：

$(document).on('click', '.item', function(e) {
  e.preventDefault();
  var aTag = $(this);
  if (aTag.siblings('.testing, .loader').length === 0) { //it's not loaded or loading
    var loader = $('<div class="loader">Loading</div>');
    loader.insertAfter(aTag);
    //function code here

    loader.remove();
    aTag.after('<div class="testing"><h3>showing ' + aTag.html() + ' here</h3></div>');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ids">
  <li class="res"><a class="item">item1</a>
  </li>
  <li class="res"><a class="item">item2</a>
  </li>
  <li class="res"><a class="item">item3</a>
  </li>
</ul>

如果您想避免多次加载，请检查之前是否存在：

if(aTag.siblings('.testing, .loader').length === 0){ //it's not loaded or loading

}