【问题标题】:How to store an array of height values and use them in another script如何存储高度值数组并在另一个脚本中使用它们
【发布时间】:2013-05-20 19:25:45
【问题描述】:

我有很多东西要学,所以真的可以使用一些指针:http://jsfiddle.net/David_Knowles/9kDC3/

问题

  1. 我正在尝试迭代存储条形中条形的高度值 图表。
  2. 然后我将所有的高度设置为零
  3. 然后我触发条形动画,将高度增加到存储在数组中的原始值

问题

  1. 在我看来,数组被覆盖而不是 越来越满
  2. 我不知道最好的方法是与 我稍后触发的其他脚本

//

$(function(){
// get the height of all the bars
var $theBars = $("#v-bars").children();
var BarsHeight = $theBars.each(function(index, element ) {
    var origHeight = [];
    origHeight.push($(this).attr("height"));
    console.log (origHeight);
});

//
$("#svg-skills-expertise").click(function() {
    $($theBars).each(function(){
        $(this).css("MyH",$(this).attr("height")).animate(
        {
            MyH:400 // this value needs to be the array values so how 
        },
        {
            step:function(v1){
                $(this).attr("height",v1)
            }
        })
    })
    console.log ("Yeap the clicked it! callback");
});
});

【问题讨论】:

  • origHeight 数组正在创建中,向其推送 1 个值,然后在每个循环中重新创建......
  • 在函数外声明数组,现在当你声明它时,作用域仅限于该函数内。

标签: javascript jquery arrays jquery-animate each


【解决方案1】:

Updated!

在您的函数调用之外初始化 origHeight,将参数“i”添加到 $($theBars).each 函数(将索引传递给每个调用),以及设置 MyH: origHeight[i].

/* SVG ARRAY \\\\\\\\\ */

var origHeight = [];
$(function(){
    var $theBars = $("#v-bars").children();
    var BarsHeight = $theBars.each(function(index, element ) {
        origHeight.push($(this).attr("height"));
        console.log (origHeight);
    });


    $("#svg-skills-expertise").click(function() {
        $($theBars).each(function(i){
            $(this).css("MyH",$(this).attr("height")).animate(
            {
                MyH:origHeight[i]
            },
            {
                step:function(v1){
                    $(this).attr("height",v1)
                }
            })
        })
        console.log ("Yeap clicked it!");
    });
});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-11-02
    • 2016-03-31
    相关资源
    最近更新 更多