Question

我想要一个非常简单的插件。它所做的就是获取匹配的项目，并在其前面添加一个div，其高度相同，以动画为用户在HTML中的数据属性中指定的宽度。

当我在我的测试页面上运行它时，只有几个div，只有最后一个div受插件影响，其他都不受影响。

这是我对插件的悲惨尝试：

(function($) {

$.fn.skillBarLoad = function( colourGiven, speedGiven) {

     var appendedSkillBar = $("<div></div>");
     appendedSkillBar.css({
         "border-radius": "inherit",
         "height": "100%",
         "width": "0%",
         "background-color": colourGiven
     });

    return this.each( function() {

    $(this).prepend(appendedSkillBar);
    var percentageFromData = $(this).attr('data-load-percent');

    appendedSkillBar.animate( {
        width: percentageFromData + "%"
     }, speedGiven);
    });
}

}(jQuery));

$(document).ready(function() {
    $(".skillBar").skillBarLoad("blue", 2000);
});

这是我的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Yo</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="skillBar" data-load-percent="90"></div>
    <div class="skillBar" data-load-percent="90"></div>
    <div class="skillBar" data-load-percent="90"></div>
</body>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">  </script>
<script src="jquery.skill-bars.js"></script>
</html>

显然，我对此问题没有任何帮助，建议或温和暗示，我非常感激。

每个人都过得愉快。

编辑：评论中提供的答案

.prepend（）不会多次复制该元素，所以改为使用.clone（），然后再使用此克隆。

Answer 1

您需要在$(<div></div>)的每次迭代中创建一个.each()。

您还可以通过在循环之前定义CSS映射一次来更有效地完成工作。

(function($) {
    $.fn.skillBarLoad = function(colourGiven, speedGiven) {
        var cssMap = {
            "border-radius": "inherit",
            "height": "100%",
            "width": "0%",
            "background-color": colourGiven
        };
        return this.each( function() {
            $("<div/>").css(cssMap).animate({
                width: $(this).data('load-percent') + "%"
            }, speedGiven).prependTo(this);
        });
    }
}(jQuery));

jQuery插件没有循环匹配的项目？

1 个答案: