jQuery在bootstrap collapse组件中动态更改进度条“aria-valuenow”属性和CSS“width”属性的值

aij0ehis 于 5个月前发布在 jQuery

关注(0)|答案(1)|浏览(60)

我从我的HTML代码片段。我可以问我如何动态地改变每个 Bootstrap 折叠组件内的每个进度条的宽度吗？我的预期输出是，当我点击折叠组件时，它将显示它里面的所有进度条，每个进度条都在前进，直到达到各自的期望值。

<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);

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

jquery

来源：https://stackoverflow.com/questions/69552182/jquery-to-change-dynamically-the-values-of-progress-bar-aria-valuenow-attribut

1条答案

按热度按时间

rks48beu1#

在这里，你可以做的最简单的事情就是将.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

赞(0）回复(0）举报 5个月前