單擊元素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！

因此，當您單擊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）。

誰能向我解釋我在這里做錯了什么？

謝謝！

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")