我的jQuery与CSS代码无法实现点击切换删除线功能，求问题排查及元素移至列表底部的实现指引

我来帮你搞定这两个功能，先说说原代码失效的原因，再给出完整的实现方案：

首先，你的切换删除线功能不能正常工作，主要有两个问题：

• 错误调用了$(this).css.style.text-decoration：jQuery对象没有style属性，正确获取样式的方式是$(this).css('text-decoration')
• 直接判断text-decoration的返回值不可靠：浏览器返回的计算样式往往是完整字符串（比如line-through solid rgb(0,0,0)），不是单纯的line-through，导致判断逻辑失效

更稳妥的方式是用CSS类切换来实现删除线效果，同时我会帮你整合“点击后移到列表底部”的功能。

完整实现代码 #

1. 先定义删除线的CSS类 #

添加一段样式，专门用来控制删除线效果：

.strikethrough {
  text-decoration: line-through;
}

2. 修正并扩展jQuery代码 #

把原JS代码替换成下面的逻辑，同时实现两个需求：

$(".player-name-wrapper").children().click(function() { 
    // 一键切换删除线状态：有则移除，无则添加
    $(this).toggleClass("strikethrough");
    
    // 将当前元素移到列表底部：把元素追加到父元素末尾
    $(this).appendTo($(this).parent());
}); 

3. 完整的HTML结构 #

把样式、脚本和页面结构整合在一起：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.strikethrough {
  text-decoration: line-through;
}
</style>
<div id="qb-wrapper" class="position-wrapper hide-wrapper"> 
    <h4 class="box-heading">QB</h4> 
    <div id="qb-names" class="player-name-wrapper"> 
        <a>QB Player Name</a> 
        <a>Player Name</a> 
        <a>Player Name</a> 
        <a>Player Name</a> 
        <a>Player Name</a> 
        <a>Player Name</a> 
    </div> 
</div>

代码逻辑说明 #

• 切换删除线：toggleClass方法会自动检测元素是否已拥有目标类，自动完成“添加/移除”的切换，比手动判断CSS值简洁且不容易出错
• 移到列表底部：appendTo($(this).parent())会把当前点击的元素从原有位置移除，然后追加到它的父容器（.player-name-wrapper）的最后，轻松实现移到底部的效果

这样修改后，你点击任意列表项时，会同时完成删除线切换和移至底部的操作，完全符合你的预期～

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