找到你要的答案

Q:Make turn.js use a class insted of id

Q:让turn.js使用类而不是ID

i want to make turn.js use class insted on id the below fiddle uses id so am trying with a class

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

i tried with this

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

that plugin works if i use return document.getElementsByClassName(id)[0]; but was not able to do with this return document.getElementsByClassName(id)[i] so that it applies to multiple having the same 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>

Please let me know if i am going in the right direction or is there any other better way to do this as i am not expert in JavaScript

我想让turn.js使用类而在ID下面的小提琴使用ID所以我试图以一类

小提琴:- 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];
      }
    }

如果我使用返回文件的插件工作。getelementsbyclassname(ID)[ 0 ];但不能返回文档。getelementsbyclassname(ID)[我]所以它适用于多个具有相同的类

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

answer1: 回答1:

Each function only returns once. If the function should return several values, you can return an object or an array.

The module works with only 1 element. Some parts of the module should be rewritten so it will work with 1 or more elements. You are using jQuery and the modification can be done easily.

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

Note that I have used the .each() method for iterating through the collection and calling the turn method as it seems the plugin only use the first element of the current collection.

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

模块只使用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');
}());

这里是一个演示。

请注意,我用了,遍历集合和调用方法似乎插件只能使用当前集合的第一个元素each()方法。

javascript  jquery