将属性值返回给对象 Javascript

Question

我需要将“data-animate”和“data-speed”的属性值返回给对象fxBalloon。 在该对象中，这些字符串值应传递给duration : $speedFX和name :$nameFX但未定义。 请查看下面的代码和链接以供参考

https://codepen.io/paul-solomon/pen/MzjYmK?editors=1111 。

<div class="container">
        <div class="balloon">
          <div class="fxballoon" data-animate="b_layer1" data-speed="6s">
            <span>sample</span>
          </div>
          <div class="fxballoon" data-animate="b_layer2" data-speed="5s">
            <span>sample</span>
          </div>
           <div class="fxballoon" data-animate="b_layer3" data-speed="3s">
             <span>sample</span>
          </div>
        </div>
    </div>

//Global Var
var $elemClass = $(".balloon .fxballoon"); 

var fxBalloon = {
  elem : $elemClass,//Class or Id
  name :$nameFX,  //Sets Option Name for Balloon Animation 
  duration : $speedFX, //Sets Option for Speed  
  delay :  "ease-in-out", //Sets Option for Easing 
  count : "infinite", // sets an Infinite Loop
  action : "paused", // Sets the Play or Pause Action
  $nameFX: function() {
     dataAnimation();
    },
  $speedFX: function() {
    dataSpeedAnimation();
    },
  $animationFX: function() {
  $(this).each(function() { //Iterates over the object FxController    
 setAnimation(this.elem,this.name,this.duration,this.delay,this.count,this.action);
     });
    }
  };



fxBalloon.$animationFX();

 // loops to get the data-speed attribute value from DOM
 function dataSpeedAnimation(){
    for( var i = 0; i < $elemClass.length;i++){
     // console.log($elemClass[i].getAttribute("data-speed"));
      $elemClass[i].getAttribute("data-speed");
    }
  }
 // loops to get the data-animate attribute value from DOM
 function dataAnimation(){
      for( var i = 0; i <  $elemClass.length;i++){
        return $elemClass[i].getAttribute("data-animate");
      }
    }

// Object Construct for CSS to animate styles to DOM
function setAnimation(elem, name, duration, delay, count, action) {
$(elem).css({ "-webkit-animation": name + " "+ duration + " "+ delay + " "+ count });
$(elem).css({ "-moz-animation": name + " "+ duration + " "+ delay + " "+ count });
$(elem).css({ "-o-animation": name + " "+ duration + " "+ delay + " "+ count  });
$(elem).css({ "animation": name + " "+ duration + " "+ delay + " "+ count});
$(elem).css({ "animation-play-state:": action});
}

Answer 1

    var fxBalloon = {
  elem : $elemClass,//Class or Id
  name :"ease-in-out",  //Sets Option Name for Balloon Animation 
  duration : "ease-in-out", //Sets Option for Speed  
  delay :  "ease-in-out", //Sets Option for Easing 
  count : "infinite", // sets an Infinite Loop
  action : "paused", // Sets the Play or Pause Action
  $nameFX: 
   dataAnimation(),
  $speedFX: 
     dataSpeedAnimation(),
  $animationFX: function() {

     $(this).each(function() { //Iterates over the object FxController
         dataSpeedAnimation(); 
 setAnimation(this.elem,this.name,this.duration,this.delay,this.count,this.action);
     });
    }
  };
 fxBalloon.$animationFX();