![](/img/trans.png)
[英]is it possible to select child element when you click on parent element in react, and the add a class to the parent element after an event
[英]Get parent form class when you click on an element jQuery
让我们从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!
因此,当您单击Attack时,我必须获得表单的类名(在此示例中为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'
的按钮class = 'caption at'
,我们必须检查表单类是否为send_units。
我试过这个来上课:
jQuery(e).find('form').parent().prop('class')
但它返回“未定义”。 (逻辑对我说:使用元素“ form”获取被单击元素的父元素,并获取该元素的className)。
谁能向我解释我在这里做错了什么?
谢谢!
使用.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>
尝试一下,因为您已经知道div级别了。
$(e.target).parent().parent().parent().attr("send_units")
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.