無法檢測到單擊了哪個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>');
});

此外，該函數還會在類別為“ mydiv”的類別后追加1個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

}

Answer 2

您可以使用$（this）獲得href屬性。 這應該工作。

$(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>');
});

另外，上面的代碼會將d​​iv附加到a標簽內。 您可能想使用類似的東西將其放置在其他地方

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

要隱藏加載消息，可以將其包裝在一個范圍內

 $(this).append('<span class="loadingspan">Loading</span>');

然后，在加載完成后運行的代碼中，可以使用

$('.loadingspan').hide();