使用jquery檢查元素

Question

我想在單擊該元素時獲取元素的id（或class）。 我寫這個代碼。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 

 
<script> 
 
    $(document).ready(function() { 
 
    $('*').click(function() { 
 
     var idName = $(this).attr('class'); 
 
     alert(idName); 
 
    }); 
 
    }); 
 
</script> 
 
<div class="test"> 
 
    <div class="test1"> 
 
    <div class="test2"> 
 
     test 
 
    </div> 
 
    </div> 
 
</div>

，但它給我的父類的類（ID）。（和undefined） 我怎麼能刪除？（給我一個元素的類（或ID））

Answer 1

添加event.stopPropagation和使用event.target：

$(document).ready(function() { 
    $('*').click(function(e) { 
     e.stopPropagation(); 
     var idName = $(e.target).attr('class'); 
     alert(idName); 
    }); 
    }); 

Answer 2

使用.attr('class')類（es）和.attr('id')爲id。我更新了下面的示例。

當你點擊一個元素時，點擊會向下傳播所有包含的元素，並會觸發每個元素的點擊功能。停止傳播使用.stopPropagation()。

$().ready(function() { 
 
    $('*').click(function(e) { 
 
     var classNames = $(this).attr('class'); 
 
     var idName = $(this).attr('id'); 
 
     alert('ID: ' + idName + '\r\nClasses: ' + classNames); 
 
     e.stopPropagation(); 
 
    }); 
 
    });

#a { 
 
    width: 200px; 
 
    height: 100px; 
 
} 
 
div { 
 
    border: 2px solid black; 
 
    border-sizing: border-box; 
 
    padding: 4px; 
 
} 
 
#a div { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.test { 
 
    background-color: green; 
 
} 
 
.test1 { 
 
    background-color: red; 
 
} 
 
.test2 { 
 
    background-color: orange; 
 
} 
 
.class1 { 
 
    text-decoration: underline overline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 

 
<div id="a" class="test">test 
 
    <div id="b" class="test1 class1">test1 
 
    <div id="c" class="test2 class1"> 
 
     test2 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

或使其只出示本人身份證件的每個元素：

$('*').click(function(event) { 
 
    event.stopPropagation(); 
 
    var ident = $(event.target).attr('id'); 
 
    alert("id = " + ident); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="button">button</button> 
 
<br> 
 
<br> 
 
<input type="textbox" id="textbox" placeholder="textbox" /> 
 
<br> 
 
<br> 
 
<span id="text">text</span>