jQuery动态更改引导折叠组件内的progress-bar“aria-valuenow”属性和CSS“width”属性的值

Posted 2023-05-08

【中文标题】jQuery动态更改引导折叠组件内的progress-bar“aria-valuenow”属性和CSS“width”属性的值

【英文标题】：jQuery to change dynamically the values of progress-bar "aria-valuenow" attribute and CSS "width" property inside bootstrap collapse component

【发布时间】：2021-12-01 17:42:16

【问题描述】：

我的 html 中有这个 sn-p 代码。请问如何动态更改每个引导折叠组件内每个进度条的宽度？我的预期输出是，当我单击折叠组件时，它将显示其中的所有进度条，每个进度条都在进行，直到达到各自的所需值。

            <p>
                <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                  Link with href
                </a>
                <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1">
                    Link with href
                  </a>
              </p>
            </p>
            <div class="collapse" id="collapseExample">
                <div class="skill mb-4">
                    <div class="d-flex justify-content-between">
                        <h6 class="font-weight-bold">CSS</h6>
                        <h6 class="font-weight-bold">85%</h6>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="skill mb-4">
                    <div class="d-flex justify-content-between">
                        <h6 class="font-weight-bold">HTML</h6>
                        <h6 class="font-weight-bold">95%</h6>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
            <div class="collapse1" id="collapseExample1">
                <div class="skill mb-4">
                    <div class="d-flex justify-content-between">
                        <h6 class="font-weight-bold">CSS</h6>
                        <h6 class="font-weight-bold">85%</h6>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="skill mb-4">
                    <div class="d-flex justify-content-between">
                        <h6 class="font-weight-bold">HTML</h6>
                        <h6 class="font-weight-bold">95%</h6>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>

这是我在我的 javascript 中添加的，但它不起作用。 我只是Web开发的初学者。我希望你能理解我问这个问题。我已经尝试从这个平台挖掘出来，但我没有在折叠组件内的动态进度条上找到任何线索。再次感谢您的帮助。

(function ($) 
    "use strict";
    /*==================== COLLAPSE ===========================*/ 
    $('#collapseExample').on('show.bs.collapse', function () 
        $('.collapse .skill .progress .progress-bar').each(function () 
            $(this).css("width", $(this).attr("aria-valuenow") + '%');
        );
    );

)(jQuery);

我在这里放了sn-p的代码功能。如果您无法访问它，请告诉我。我的预期输出就像我在 script.js 中找到的 javascript 中的航点函数驱动的 6 个进度条。我希望每个折叠组件的两个进度条的功能与我尝试在 progress-bar.js 中实现的功能相同，但它也可以集成到 script.js。 folder containing the snippet of the code

【问题讨论】：

您的引导程序包含语句在哪里？请发布您的整个 html、javascript 和 css 代码

drive.google.com/drive/folders/… 你好。我把它放在我的驱动器上。让我知道您是否可以访问它。我删除了与我的问题@woodz 无关的部分。 TIA。顺便提一句。我的预期输出类似于带有航点功能的输出，但只有在单击每个按钮时折叠组件内的输出才会是动态的。

【参考方案1】：

您可以在这里做的最简单的事情是将您的css jQuery 函数更改为animate。虽然我不认为这完全达到你想要的。

    $(this).animate(
        "width": $(this).attr("aria-valuenow") + '%', 
    );

为了改进这一点，您可以测试进度条的宽度，并根据该值是否为 0 来更改“aria-valuenow”的宽度。

    if ($(this).width() < 100)
    
            $(this).animate(
            "width": $(this).attr("aria-valuenow") + '%', 
        );
     else 
            $(this).animate(
            "width": '0%', 
            );
    

https://jsfiddle.net/fatchild/7bhx8msz