event.currentTarget切换子元素类失效，遇TypeError错误求助

尝试通过event.currentTarget切换其子元素的类，但触发上述错误，无法实现效果。需求是选中当前点击元素的第一个子元素（.post-footer-icons-circle）并成功切换类redl。

HTML结构 #

<div class="post-footer-icons-container-el" data-btntype="comment">
    <div class="post-footer-icons-circle bluei">
        <img class="post-footer-icons" src="/icons/chat-bubble.png"> 
    </div>
    <!-- 模板渲染的评论数，示例：<%= UserPosts[i].retweetedpost.numComments %> -->
</div>

原事件处理代码 #

$(".post-footer-icons-container-el").on("click",function(event){
    event.preventDefault();
    const postid = event.currentTarget.parentElement.getAttribute("data-postId");
    const typebtn = event.currentTarget.getAttribute("data-btntype");
    
    if(typebtn==="like"){
        axios.post("http://127.0.0.1:3000/useractions/likepostmanage",{
                "likedpost":postid
            }).then(function(response){
                //the parent event handler will not be triggered
                
        });

        event.currentTarget.children(".post-footer-icons-circle").toggleClass("redl");
    }
    if(typebtn==="rt"){
        axios.post("http://127.0.0.1:3000/useractions/retweetpostmanage",{
                "retweetedpost":postid
            }).then(function(response){
                //the parent event handler will not be triggered
                
        });
        $(event.currentTarget).find(":selected").toggleClass("redl");
    }
    
    event.stopPropagation(); 
});

解决方法 #

错误根源 #

event.currentTarget是原生DOM元素，不是jQuery对象，因此无法直接调用jQuery的.children()、.toggleClass()等方法，这是触发报错的核心原因。

修正步骤 #

1. 将原生DOM元素转为jQuery对象：用$(event.currentTarget)包裹，建议缓存为变量避免重复转换。
2. 替换错误的选择器：rt分支中使用的:selected是下拉框选项的选择器，不适用于当前场景，需改为选中目标子元素.post-footer-icons-circle。
3. 统一使用jQuery方法操作DOM：比如用.attr()替代原生的.getAttribute()，保持代码风格一致。

修正后的完整代码 #

$(".post-footer-icons-container-el").on("click",function(event){
    event.preventDefault();
    const $target = $(event.currentTarget); // 转为jQuery对象并缓存
    const postid = $target.parent().attr("data-postId");
    const typebtn = $target.attr("data-btntype");
    
    if(typebtn==="like"){
        axios.post("http://127.0.0.1:3000/useractions/likepostmanage",{
                "likedpost":postid
            }).then(function(response){
                // 可在此添加接口响应后的逻辑，比如更新页面数据
        });

        $target.children(".post-footer-icons-circle").toggleClass("redl");
    }
    if(typebtn==="rt"){
        axios.post("http://127.0.0.1:3000/useractions/retweetpostmanage",{
                "retweetedpost":postid
            }).then(function(response){
                // 可在此添加接口响应后的逻辑
        });
        $target.children(".post-footer-icons-circle").toggleClass("redl");
    }
    
    event.stopPropagation(); 
});

额外说明 #

• 如果需要选中的是第一个子元素，除了.children(".post-footer-icons-circle")，也可以用.children().first()，效果一致。
• 接口请求完成后，如果需要根据返回结果更新类（而非直接切换），可以把toggleClass逻辑移到then回调中，确保状态和后端同步。

内容的提问来源于stack exchange，提问作者Jaz