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'的按钮时，我们必须检查表单类是否为send_units。

我试过这个来上课：

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

但它返回＆＃34; undefined＆＃34;。（逻辑告诉我：获取被点击元素的父元素，使用元素＆＃34;形式＆＃34;并获取该元素的className。）

有人能向我解释我在这里做错了什么吗？

谢谢！

Answer 1

使用.parents( selector )将DOM的多个级别遍历到您需要的元素，并.hasClass( class )来测试是否存在类。

＆＃13;

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
        }
    }
}

＆＃13;

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

＆＃13;

Answer 2

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

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

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

2 个答案: