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

Question

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

这是我到目前为止的代码。如果您查看我的代码，我想更改 Var elem。所以我可以传入'about'，它会将 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

有几种巧妙的方法可以解决这个问题，一种方法是使用枚举和 switch 语句。

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
}

我知道这是更多的代码，但这是非常可扩展的，只需将新的选择器添加到 enum 和 switch 语句就可以了。最好的部分是您不必在每次调用函数时都键入选择器，从而最大限度地减少发生错误的机会。虽然，如果您要在多个函数中使用选择器，我建议使用数组或字典将所有选择器保存在一个位置。