Question

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

＆＃13;

// 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;
};

＆＃13;

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

＆＃13;

<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>

＆＃13;

我不明白为什么＆＃34; slideUp ＆＃34;效果不起作用。谢谢！

问候！： - ）

Answer 1

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

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

如果您不使用括号，Javascript将在configuracion对象上查找next('div')属性，并附加efecto方法（不是＆＃ 39;案例）。使用括号可以使用.next('div')['fadeIn'](configuracion.velocidadEfecto)，因为configuracion.efecto被计算为其字符串值。

希望这有帮助。

我需要制作一个让用户选择的插件

1 个答案: