[英]Selecting an element that has just been clicked JQuery
我有一個<div>
包含<a>
標簽和更多div:
<div>
<div class="icons">
<div class="group popOutDisplay">
<a href="#" data-id="128910"><i class="fa fa-home"></i></a>
<a href="#" data-id="239019"><i class="fa fa-search"></i></a>
<a href="#" data-id="346653"><i class="fas fa-bicycle"></i></a>
</div>
<div class="group">
<a href="#"><i class="fa fa-globe"></i></a>
</div>
<div class="group bottom">
<a href="#"><i class="fa fa-trash"></i></a>
</div>
</div>
<div class="content">
<div id="128910";>
<p>some content</p>
</div>
<div id="239019";>
</div>
<div id="346653";>
</div>
</div>
</div>
我試圖用jquery選擇錨標簽上的數據屬性,這樣我就可以在<div class="content">
中顯示具有相同ID的<div>
標簽(如果有意義的話)。
到目前為止,我已經能夠識別數據ID
$(".group.popOutDisplay a")[0].attributes[1].value;
但由於[0]
索引,這只給出了第一個元素的ID。
tldr:如何獲取剛剛點擊的<a>
標簽的數據ID?
開始了:
$('.popOutDisplay a').click(function(e) {
e.preventDefault();
console.log($(this).data('id'));
});
這里是.data()
屬性的文檔 。
你可以使用“.click()”。 檢查下面的代碼段..
$('.popOutDisplay a').click(function(e){ e.preventDefault(); var elID = $(this).data('id'); console.log(elID); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <div> <div class="icons"> <div class="group popOutDisplay"> <a href="#" data-id="128910"><i class="fa fa-home"></i></a> <a href="#" data-id="239019"><i class="fa fa-search"></i></a> <a href="#" data-id="346653"><i class="fas fa-bicycle"></i></a> </div> <div class="group"> <a href="#"><i class="fa fa-globe"></i></a> </div> <div class="group bottom"> <a href="#"><i class="fa fa-trash"></i></a> </div> </div> <div class="content"> <div id="128910";> <p>some content</p> </div> <div id="239019";> </div> <div id="346653";> </div> </div> </div>
$(".group a").click(function(){
var data=$(this).attr("data-id");
alert(data)
});
要將值的屬性檢索為字符串而不嘗試轉換它,請使用attr()方法。
$(document).on("click", "[data-id]", function (event){
event.preventDefault();
var id = $(this).attr("data-id");
// Apply your logic here
// $("#" + id)
});
在a
元素容器div <div class="group popOutDisplay"
上綁定click事件監聽器。 其原因是因為在click事件a
元素將泡沫最多的div容器。
就像是
$('.group.popOutDisplay').bind('click', function(e) {
var target = e.target;
if (target.tagName.toLowerCase() === 'a') {
e.preventDefault(); //prevent the default action of navigating to the url
var id = target.dataset.id;
//you now have the id;
$('#' + id).css('display', 'block'); //display the div
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.