时间戳

首页 > 解决方案 > 如何使用 jQuery 在 button > span 中找到类？

jquery - 如何使用 jQuery 在 button > span 中找到类？

问题描述

我想在用户单击按钮时更改图标，所以首先我需要找到按钮具有的图标，由类的名称确定。

我目前可以将图标更改为其他图标，但是当我尝试 *find* 课程时，它无法正常工作。

如果跨度具有正确的类，我目前正在通过显示警报进行测试，但它没有发出警报。我究竟做错了什么？

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');

标签： jquery

解决方案

您没有正确获取按钮的句柄 - $(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>

推荐阅读