如何利用bookcount元素数值自动更新Progress bar进度

问题分析 #

当前代码的问题在于直接把选择器字符串#bookcount赋值给了进度条的val()，而非获取该元素内的实际数值。同时现有代码仅在页面加载时执行一次，无法监听后续图书数量的动态变化。

实现步骤 #

• 页面初始化时，读取#bookcount的文本内容，设置为进度条初始值
• 监听#bookcount的内容变化，一旦数值更新，同步更新进度条的value属性

修正后的代码 #

HTML部分

<div id="bookcount">2</div>
<label for="bookprogress">progress:</label>
<progress id="bookprogress" max="5" value="2"> 70% </progress>

JavaScript部分（jQuery）

$(document).ready(function(){
    // 封装进度条更新逻辑
    function updateProgress() {
        // 读取图书数量并转为数值类型，处理可能的空格
        const bookNum = parseInt($("#bookcount").text().trim(), 10);
        $("#bookprogress").val(bookNum);
    }

    // 页面加载完成后初始化进度条
    updateProgress();

    // 监听图书计数元素的内容变化，实时同步进度条
    $("#bookcount").on("DOMSubtreeModified", function() {
        updateProgress();
    });
});

补充说明 #

如果你的项目中是通过特定逻辑（比如自定义添加图书的函数、AJAX请求）更新#bookcount，也可以直接在更新#bookcount的代码后调用updateProgress()，这种方式比监听DOM事件更高效。

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