Question

我正在尝试重复使用这个函数，但是这样我就可以传递一个不同的选择器，而不必每次都为不同的选择器名称多次编写函数。

这是我到目前为止我的代码。如果你看我的代码，我想改变Var elem。所以我可以传递'约'，它会将var elem改为$（“about-slide .animate”）。我希望这是因为。

    function animateLight() {
    var elem = $("#solutions-slide .animate");
    elem.fadeIn();
    setInterval(function(){
      elem.animate({
        opacity: "-=0.1"
      }, 200 , function() {
        if(elem.css("opacity") <= 0.5){
         $(this).css({
          opacity: '1'
        });
      }
      });
    },50);
  }

Answer 1

我会把它改为：

然后，您可以通过执行animateLight("solutions");

来调用此函数

function animateLight(controlid) {
    var elem = $("#" + controlid + "-slide .animate");
    elem.fadeIn();
    setInterval(function(){
      elem.animate({
        opacity: "-=0.1"
      }, 200 , function() {
        if(elem.css("opacity") <= 0.5){
         $(this).css({
          opacity: '1'
        });
      }
      });
    },50);
  }

或者您可以将其修改为整个选择器：

然后，您可以通过执行animateLight("#solutions-slide .animate")

来调用它

function animateLight(selector) {
    var elem = $(selector);
    elem.fadeIn();
    setInterval(function(){
      elem.animate({
        opacity: "-=0.1"
      }, 200 , function() {
        if(elem.css("opacity") <= 0.5){
         $(this).css({
          opacity: '1'
        });
      }
      });
    },50);
  }

Answer 2

这样的事情听起来像你在寻找：

function animateLight(prefix) {
    var elem = $("#" + prefix + "-slide .animate");
    elem.fadeIn();
    setInterval(function(){
        elem.animate({
            opacity: "-=0.1"
        }, 200 , function() {
            if(elem.css("opacity") <= 0.5){
            $(this).css({
                opacity: '1'
            });
        }
    });
    },50);
}

Answer 3

有几种巧妙的方法可以解决这个问题，一种方法是使用枚举和转换声明。

var SELECTOR_ENUM = { solutions: 0, about: 1 };

function animateLight(selector) {
    var suffix = "-slide .animate";
    switch( selector ) {
        case 0:
            elem = $( "#solutions" + suffix );
        break;
        case 1:
            elem = $( "#about" + suffix );
        break;
        //you see where im going...
        default:
            elem = $( "#solutions" + suffix );
        break;
    }
        //the rest of your code
}

我知道这是更多的代码，但这是非常可扩展的，只需添加新的选择器枚举和切换语句，你准备好了。最好的部分是你不必每次调用函数时键入选择器，最大限度地减少出错的可能性发生。虽然，如果您打算在多个函数中使用选择器，我建议使用数组或字典将所有选择器保存在一个地方。

如何通过每次使用传入不同的#id来使函数动态化？

3 个答案: