包含IF语句的jQuery.on（click）函数检查.hasClass（）是否在不包含该类时始终返回true？

我一直在与一个诡计作斗争，如果它一直返回一个真值，尽管它检查的类在页面加载中不存在

如果不存在该类，我将尝试添加该类，然后在该类存在时删除该类

console.logs显示它正确地获取了popular value&full的属性，并成功地将这些属性记录到各自的console.logs中。但是，IF always console.logs“具有类”

以下是函数：

$(document).on("click", ".popular-tag", function(){
    var popularTag = $(this);
    var popularTagSlug = popularTag.attr('popular-value');
    console.log(popularTagSlug);
    var popularTagName = popularTag.attr('popular-full');
    console.log(popularTagName);

    if (popularTag.hasClass('selected')) {
        console.log('has class');
        popularTag.removeClass('selected');
        popularTag.removeClass('selected-tag');
        popularTag.removeAttr('data-slug');
        popularTag.removeAttr('data-name');
    } else {
        console.log('doesnt have class');
        popularTag.addClass('selected');
        popularTag.addClass('selected-tag');
        popularTag.attr('data-slug', popularTagSlug);
        popularTag.attr('data-name', popularTagName);
    }
});

这是它正在玩的HTML（单击前）：

为什么总是说“已选择”的类在那里？

$（document）.on（“单击”，“.popular标记”，函数（））{
var popularTag=$（此值）；
var popularTagSlug=popularTag.attr（'popular-value'）；
console.log（popularTagSlug）；
var popularTagName=popularTag.attr（'popular-full'）；
console.log（popularTagName）；
if（popularTag.hasClass（'selected'））{
log（'has class'）；
popularTag.removeClass（'selected'）；
popularTag.removeClass（'selected-tag'）；
popularTag.removeAttr（'data-slug'）；
popularTag.removeAttr（'data-name'）；
}否则{
log（'没有类'）；
popularTag.addClass（'selected'）；
popularTag.addClass（'selected-tag'）；
popularTag.attr（'data-slug'，popularTagSlug'）；
popularTag.attr（'data-name'，popularTagName）；
}
});

大众财产
美学
耐腐蚀
硬的
您的代码应该可以正常工作。如果仅使用粘贴的代码无法重现问题，则表示页面（或浏览器插件/扩展）上加载了其他内容，正在修改该行为。有没有关于如何执行此操作的指针？因为它在单击并使用$（this）时运行，我无法理解在页面加载之后，它如何滑出它为检查类而单击的元素的范围。您是否尝试过在控制台
$（'.popular tag'）.hasClass（'selected'）
中运行此操作？它显示了什么？在调试中使用该元素怎么样？它是否显示任何可见的选定标记？将其放入控制台，并更改$->jQuery。它返回false。
<div class="popular-tags-selection">

    <div class="popular-tags-selection-title">
        Popular properties
    </div>

    <div id="popular-tags" class="popular-tags">

        <div class="search-tag popular-tag" popular-value="aesthetic" popular-full="Aesthetic"><div class="popular-tag-title">Aesthetic</div></div>
        <div class="search-tag popular-tag" popular-value="corrosion-resistant" popular-full="Corrosion resistant"><div class="popular-tag-title">Corrosion resistant</div></div>
        <div class="search-tag popular-tag" popular-value="hard" popular-full="Hard"><div class="popular-tag-title">Hard</div></div>

    </div>

</div>

<div class="popular-tags-selection">

    <div class="popular-tags-selection-title">
        Popular properties
    </div>

    <div id="popular-tags" class="popular-tags">

        <div class="search-tag popular-tag" popular-value="aesthetic" popular-full="Aesthetic"><div class="popular-tag-title">Aesthetic</div></div>
        <div class="search-tag popular-tag" popular-value="corrosion-resistant" popular-full="Corrosion resistant"><div class="popular-tag-title">Corrosion resistant</div></div>
        <div class="search-tag popular-tag" popular-value="hard" popular-full="Hard"><div class="popular-tag-title">Hard</div></div>

    </div>

</div>

11:55:17.801 ready-functions.js?200226115513:448 aesthetic
11:55:17.989 ready-functions.js?200226115513:450 Aesthetic
11:55:17.989 ready-functions.js?200226115513:453 has class
11:55:18.801 ready-functions.js?200226115513:448 aesthetic
11:55:18.801 ready-functions.js?200226115513:450 Aesthetic
11:55:18.801 ready-functions.js?200226115513:453 has class