单击元素 jQuery 时获取父表单 class

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!

因此，当您单击“攻击”时，我必须获取表单的 class 名称（在此示例中为 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 是否为 send_units。

我试过这个来获得 class:

jQuery(e).find('form').parent().prop('class')

但它 returns "undefined"。（逻辑对我说：获取单击元素的父元素，元素 "form" 并获取该元素的 class 名称）。

任何人都可以向我解释我在这里做错了什么吗？

谢谢！

Answer 1

尝试一下，因为您已经知道 div 级别。

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

Answer 2

使用 .parents( selector ) 向上遍历 DOM 的多个级别到您需要的元素，并使用 .hasClass( class ) 测试是否存在 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>

单击元素 jQuery 时获取父表单 class

Get parent form class when you click on an element jQuery

javascript

jquery

parent

classname

find