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>

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

到目前为止，我有这个：

$(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个div标签，其中包含“mydiv”类，需要隐藏。但同样，由于附加到每个<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

}

Answer 2

您可以使用`$（this）获取href属性。这应该工作。

>>> MyTuples=[(0,100),(100,150),(150,180),(180,190),(400,450),(450,700)]
>>> MyTuples
[(0, 100), (100, 150), (150, 180), (180, 190), (400, 450), (450, 700)]
>>>

此外，上面的代码会将div附加到标记内。您可能希望使用类似

的内容将其放在其他位置

[(0,190),(400,700)]

要隐藏加载消息，您可以将其包装在范围

中

$(document).on('click', '.item', function(e) {
  e.preventDefault();
  var href = $(this).attr("href");
  $(this).append('Loading');
  $(this).append('<div class="testing"><h3>showing ' + href + ' here</h3></div>');
});

然后在加载完成时运行的代码中，您可以使用

 $("#messageDiv").html('<div class="testing"><h3>showing ' + href + ' here</h3></div>');

无法检测单击的div

2 个答案: