javascript - 让 turn.js 使用类而不是 id

Question

我想让 turn.js 使用 class insted on id 下面的 fiddle 使用 id 所以我尝试使用 class

fiddle :- http://jsfiddle.net/kmturley/GGea5/1/

我试过这个

function cls() {
      var size = document.getElementsByClassName(id).length;
      console.log(size)
      for (var i = 0; i < size; i++) {
        //return document.getElementsByClassName(id)[i];
        return document.getElementsByClassName(id)[0];
      }
    }

如果我使用 return document.getElementsByClassName(id)[0]; 这个插件就可以工作，但是不能用这个 return document.getElementsByClassName(id)[i] 以便它适用于具有相同 class

的多个

/*
 * Turn.js responsive book
 */

/*globals window, document, $*/

(function() {
  'use strict';

  var module = {
    ratio: 1.38,
    init: function(id) {
      var me = this;

      // if older browser then don't run javascript
      if (document.addEventListener) {
        function cls() {
          var size = document.getElementsByClassName(id).length;
          console.log(size)
          for (var i = 0; i < size; i++) {
            //return document.getElementsByClassName(id)[i];
            return document.getElementsByClassName(id)[0];

          }

        }
        this.el = cls();
        this.resize();
        this.plugins();

        // on window resize, update the plugin size
        window.addEventListener('resize', function(e) {
          var size = me.resize();
          $(me.el).turn('size', size.width, size.height);
        });
      }
    },
    resize: function() {
      // reset the width and height to the css defaults
      this.el.style.width = '';
      this.el.style.height = '';

      var width = this.el.clientWidth,
        height = Math.round(width / this.ratio),
        padded = Math.round(document.body.clientHeight * 0.9);

      // if the height is too big for the window, constrain it
      if (height > padded) {
        height = padded;
        width = Math.round(height * this.ratio);
      }

      // set the width and height matching the aspect ratio
      this.el.style.width = width + 'px';
      this.el.style.height = height + 'px';

      return {
        width: width,
        height: height
      };
    },
    plugins: function() {
      // run the plugin
      $(this.el).turn({
        gradients: true,
        acceleration: true
      });
    }
  };

  module.init('book');
}());

html,
body {
  height: 100%;
}
.book {
  width: 50%;
  height: 50%;
}
.book img {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.turnjs.com/lib/turn.min.js"></script>

<div class="book">
  <div class="page">
    <img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/01.jpg" alt="" />
  </div>
  <div class="page">
    <img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/02.jpg" alt="" />
  </div>
  <div class="page">
    <img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/03.jpg" alt="" />
  </div>
  <div class="page">
    <img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/04.jpg" alt="" />
  </div>
  <div class="page">
    <img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/05.jpg" alt="" />
  </div>
  <div class="page">
    <img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/06.jpg" alt="" />
  </div>
</div>

<div class="book">
  <div class="page">
    <img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/01.jpg" alt="" />
  </div>
  <div class="page">
    <img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/02.jpg" alt="" />
  </div>
  <div class="page">
    <img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/03.jpg" alt="" />
  </div>
  <div class="page">
    <img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/04.jpg" alt="" />
  </div>
  <div class="page">
    <img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/05.jpg" alt="" />
  </div>
  <div class="page">
    <img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/06.jpg" alt="" />
  </div>
</div>

请告诉我我的方向是否正确，或者是否有其他更好的方法来做到这一点，因为我不是 JavaScript 专家

Answer 1

每个函数只返回一次。如果函数应该返回多个值，您可以返回一个对象或一个数组。

该模块仅适用于 1 个元素。应该重写模块的某些部分，以便它可以与 1 个或多个元素一起使用。您正在使用 jQuery，并且可以轻松完成修改。

(function () {
    'use strict';

    var module = {
        ratio: 1.38,
        init: function (selector) {
            var me = this;
            this.collection = $(selector);
            this.plugins();
            $(window).on('resize', function (e) {
                me.collection.each(function () {
                    var size = me.resize(this);
                    $(this).turn('size', size.width, size.height);
                });
            }).resize();
        },
        resize: function (el) {
            // reset the width and height to the css defaults
            el.style.width = '';
            el.style.height = '';

            var width = el.clientWidth,
                height = Math.round(width / this.ratio),
                padded = Math.round(document.body.clientHeight * 0.9);

            // if the height is too big for the window, constrain it
            if (height > padded) {
                height = padded;
                width = Math.round(height * this.ratio);
            }

            // set the width and height matching the aspect ratio
            el.style.width = width + 'px';
            el.style.height = height + 'px';

            return {
                width: width,
                height: height
            };
        },
        plugins: function () {
            // run the plugin
            this.collection.each(function () {
                $(this).turn({
                    gradients: true,
                    acceleration: true
                });
            });
            // hide the body overflow
            document.body.className = 'hide-overflow';
        }
    };

    module.init('.book');
}());

Here is a demo.

请注意，我使用了 .each() 方法遍历集合并调用了 turn 方法，因为插件似乎只使用了集合的第一个元素当前集合。