我需要做一个插件，让用户选择生效

Question

我正在开发一个 jquery 插件，我遇到的问题是，在尝试传递设置时，我尝试设置的三个选项中有两个可以使用。当我想传递 "fadeIn" 效果时，它不会显示任何内容并停止工作。这是我的代码：

// JavaScript Document
jQuery.fn.slider = function(opciones) {

  var configuracion = {
    efecto: "fadeIn",
    velocidadEfecto: 1000,
    tiempoPausa: 3000
  }

  jQuery.extend(configuracion, opciones);

  this.each(function() {
    elem = $(this);
    elem.find('div:gt(0)').hide();

    //$('#imagenes div:gt(0)').hide();
    setInterval(function() {
      elem.find('div:first-child').fadeOut(0)
        .next('div')[configuracion.efecto](configuracion.velocidadEfecto)
        .end().appendTo('#imagenes');
    }, configuracion.tiempoPausa);

  });




  return this;
};

#imagenes {
  width: 200px;
  height: 200px;
  border: 1px solid grey;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Documento sin título</title>

  <script type="text/javascript">
    $(document).ready(function() {
      $("#imagenes").slider({
        efecto: "slideUp",
        velocidadEfecto: 2000,
        tiempoPausa: 4000
      })
    });
  </script>

</head>

<body>
  <h2>Slider</h2>
  <div id="imagenes">
    <div>
      <img src="http://www.bizreport.com/2011/02/03/android-logo-200x200.jpg" id="foto1" />
    </div>
    <div>
      <img src="http://davidnaylor.org/temp/firefox-logo-200x200.png" id="foto2" />
    </div>
    <div>
      <img src="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png" id="foto3" />
    </div>
  </div>
</body>

</html>

我不明白为什么“slideUp”效果不起作用。谢谢！

此致！ :-)

Answer 1

您可以通过字符串名称引用方法和属性，例如示例中的 "fadeIn"，但您必须使用方括号 [] 表示法，而不是点 .

setInterval(function() {
  elem.find('div:first-child').fadeOut(0)
    .next('div')[configuracion.efecto](configuracion.velocidadEfecto)
    .end().appendTo('#imagenes');
}, configuracion.tiempoPausa);

如果您不使用方括号，Javascript 将在 next('div') 对象上查找 configuracion 属性，其中 efecto附加到它的方法（事实并非如此）。使用括号可以计算出 .next('div')['fadeIn'](configuracion.velocidadEfecto)，因为 configuracion.efecto 被计算为其字符串值。

希望对您有所帮助。

我需要做一个插件，让用户选择生效

I need to make a plugin that will take effect the user chooses

javascript

jquery

jquery-plugins