让我们从 HTML 开始:
<form class="send_units">
<div class="buttons">
<div id="button_attack" class="button">
<div class="caption at">Attack!</div>
</div>
<div id="button_support" class="button">
<div class="caption sp">Support!</div>
</div>
</div>
</form>
这是网站上的代码示例。我已经为该网站制作了一个脚本。要运行该脚本,玩家可以使用 Tampermonkey。它只是向网页添加一些代码。 注意:我们无法更改 HTML!
因此,当您单击“攻击”时,我必须获取表单的类名(本例中为 send_units)!按钮。
为了确定用户点击了哪个元素,我们使用 Javascript:
window.onclick = function(e){
var clickedClass = e.target.className;
var clickedID = e.target.id;
if(clickedClass == 'caption at'){
// Check if parent form has class send_units
}
}
因此,当用户点击带有 class = 'caption at'
的按钮时,我们必须检查表单类是否为 send_units。
我试过这个来上课:
jQuery(e).find('form').parent().prop('class')
但它返回“未定义”。 (逻辑对我说:获取点击元素的父元素,元素为“form”并获取该元素的类名)。
任何人都可以向我解释我在这里做错了什么吗?
谢谢!
最佳答案
使用 .parents( selector )
遍历 DOM 的多个级别到您需要的元素,并使用 .hasClass( class )
来测试类的存在。
window.onclick = function(e){
var clickedClass = e.target.className;
var clickedID = e.target.id;
if(clickedClass == 'caption at'){
var is_send_units = $( e.target ).parents( 'form' ).hasClass( 'send_units' );
console.log( is_send_units );
if( is_send_units ){
// do stuff
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="send_units">
<div class="buttons">
<div id="button_attack" class="button">
<div class="caption at">Attack!</div>
</div>
<div id="button_support" class="button">
<div class="caption sp">Support!</div>
</div>
</div>
</form>
关于javascript - 单击元素 jQuery 时获取父表单类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45241824/