如何使用jQuery在按钮>范围内找到类？

Question

我想在用户单击按钮时更改图标，所以首先我需要查找按钮的图标，这取决于类的名称。

我目前可以将图标更改为其他图标，但是当我尝试“查找”该类时，它不起作用。

我目前正在通过显示警报来确定跨度是否具有正确的类别，但它没有警报。我在做什么错了？

HTML

<button class="btn btn-primary">
    <span class="fa fa-user-plus text-muted"></span>
</button>

jQuery

$(document).on('click', '.follow', function(e) {
    var button = $(this);

    if(button.find('span').hasClass('fa-user-plus')) {
        alert();
        // won't alert!
    }
});

编辑

以下代码有效；我可以将图标更改为微调框，因此我知道按钮>跨度定位是正确的。我只是无法确定跨度的课程。

button.find('span').removeClass('fa-user-plus').addClass('fa-spinner fa-spin');

Answer 1

您没有正确处理按钮-$（this）使您可以处理DOM，而不是按钮。 jQuery $(this)在不同的上下文中具有不同的含义。例如，您可以使用ID获取按钮句柄。请参见以下工作片段。

修改：

我刚刚阅读了您的评论。使用ID访问您的按钮只是一个示例。您也可以使用CSS类访问它。例如。 $('.btn.btn-primary')。请参见下面的修改后的代码段。

if($('.btn.btn-primary').find('span').hasClass('fa-user-plus')) {
    console.log("found");
    // won't alert!
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-primary">
    <span class="fa fa-user-plus text-muted"></span>
</button>

Answer 2

将“跟随”类添加到按钮并将其用作触发器：

HTML：

$(document).on('click', '.follow', function(e) {
    var button = $(this);

    if(button.find('span').hasClass('fa-user-plus')) {
        alert('hi');
        // won't alert!
    }
});

JQUERY：

ThirdPartyNotice.txt

Answer 3

尝试一下，希望对您有所帮助。谢谢

$('.btn').click(function() {
  var child = $(this.children)
  if(child.hasClass('fa-user-plus')) {
    child.removeClass('fa-user-plus').addClass('fa-spinner fa-spin');
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-primary">Button
    <span class="fa fa-user-plus text-muted"></span>
</button>