单击元素 jQuery 时获取父窗体类

Question

让我们从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"并获取该元素的类名(。

谁能向我解释我在这里做错了什么？

谢谢！

Answer 1

使用.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>

Answer 2

试试这个，因为你已经知道div级别了。

$(e.target).parent().parent().parent().attr("send_units")