html+jQuery：动态修改标签的文本

<ul class="list-group">
     <li class="list-group-item d-flex justify-content-between align-items-center">
        <a href="https://new.qq.com/omn/20210503/20210503A06TJL00.html" target="_blank" onclick="numAdd(this)">
                    新闻一：天和号核心舱发射成功</a>
        <p class="badge badge-primary badge-pill"><span>14</span>人已读</p>
     </li>
     <li class="list-group-item d-flex justify-content-between align-items-center">
         <a href="https://mini.eastday.com/nsa/n210511082026055.html?qid=zdcs" target="_blank" onclick="numAdd(this)">
                    新闻二：中国给印度捐赠的物资上，竟写有这八个字！</a>
         <p class="badge badge-primary badge-pill"><span>142</span>人已读</p>
     </li>
 </ul>

如上代码，我的需求是： 每点击一次超链接，已读人数就加1 ；

下面是我的js实现 ：

function numAdd(obj){
    var cur = $(obj);  // 将a标签转为jQuery对象
    // 从 a 标签 获取到span标签
    var se = cur.parent().children('p').children('span');
    var num = Number(se.text());  // 注意:se.text() 获取的是字符串，Number方法转为数字
    num = num + 1 ;
    se.text(num);
}

这里讲一下 text() 和 val() 的区别：

• text()获取标签之间的文本，如果带参数，就是修改文本，比如 text(“我好帅！”)，则标签之间的文本就改成了 我好帅；
• val() 获取标签内 属性value的值， 如果带参，就是修改value，比如：<input type="button" value="321"> , val(123) 就是将value值改为123；
• 如果你想获取 input 标签内的文本内容，要使用 val() 函数，而不是 text()，text 是获取标签之间的文本。