Javascript 使turn.js使用一个类代替id

Javascript 使turn.js使用一个类代替id,javascript,jquery,Javascript,Jquery,我想让turn.js使用class代替id下面的小提琴使用id所以我尝试使用class 小提琴:- 我试过这个 function cls() { var size = document.getElementsByClassName(id).length; console.log(size) for (var i = 0; i < size; i++) { //return document.getElementsByClassName(i

我想让
turn.js
使用
class
代替
id
下面的小提琴使用
id
所以我尝试使用
class

小提琴:-

我试过这个

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];
      }
    }
html,
身体{
身高:100%;
}
.书{
宽度:50%;
身高:50%;
}
.预订img{
宽度:100%;
身高:100%;
}

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

该模块仅使用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()
方法来迭代集合并调用
turn
方法,因为插件似乎只使用当前集合的第一个元素?具体应该返回什么?所有选定的元素?如果是的话,你为什么不归还收藏品?@Vohuman我已经更新了问题,请检查并给我任何建议,我应该朝哪个方向走。现在很清楚你想要实现什么!模块的某些部分应该重写,以便它可以使用1个或多个元素。幸运的是,您正在使用jQuery,并且可以轻松地完成它
this.el
应更改为类似于
this.collection=$(选择器)的内容
resize
方法应在集合中迭代。我将重新开始这个问题。向你致敬,伙计:)