我使用滚动文本的函数构建了这个对象，但是当我尝试将实例添加到另一个元素时，以前的实例会被新实例的配置选项覆盖。
这是 jsfiddle 上的示例顶部动画完成后，文本速度和所有其他配置选项都将被覆盖。
HTML 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Notes</title>
<script src="jquery-2.1.js"></script>
</head>
<body style="margin: 0 auto;">
<div class="scroll">
<div class="scrollContainer">
<div class="scrollText"></div>
</div>
</div>
<div>
<div>
<div id="me"></div>
</div>
</div>
<div>
<div>
<div id="try">I'll overwrite everything!</div>
</div>
</div>
<script src="scroll.js"></script>
</body>
</html>
JavaScript/jQuery 代码:
$(document).ready(function () {
$(function () {
var scroll = [];
scroll = {
config: {
text: 'hello everybody',
speed: 15000,
container: $('.scrollText'),
width: 250,
parent: $('.scrollContainer'),
parentContainer: $('.scroll'),
textWidth: 0,
totalWidth: 0
},
init: function (config) {
$.extend(this.config, config);
var self = this,
selfC = self.config,
selfE = selfC.container;
console.log(selfE);
selfE.html(scroll.config.text.trim());
selfE.css({
display: 'inline-block'
})
selfC.textWidth = scroll.config.container.width();
//console.log(scroll.config.textWidth);
selfE.css({
width: selfC.textWidth + 10,
'margin-right': scroll.config.width,
'margin-left': scroll.config.width
})
selfC.totalWidth = selfE.outerWidth(true);
selfC.parentContainer.css({
width: scroll.config.width,
overflow: 'hidden',
margin: '0 auto'
})
scroll.animate(selfE);
},
animate: function (elem) {
var self = this,
selfC = self.config,
selfE = selfC.container;
selfE.animate({
'margin-left': '-=' + (selfC.totalWidth - selfC.width)
}, selfC.speed, function () {
selfE.css({
'margin-left': scroll.config.width
})
selfE.scrollText(selfC); //.speed -= 1000
});
}
};
$.fn.scrollText = function (config) {
return this.each(function () {
var obj = Object.create(scroll);
obj.init({
text: config.text,
speed: config.speed,
width: config.width,
container: $(this),
parent: config.parent || $(this).parent(),
parentContainer: config.parentContainer || $(this).parent().parent()
}, this)
});
}
$('#me, .scrollText').scrollText({
text: 'Help us update the names on our site by going to "Account" and selecting one of the options',
width: 250,
speed: 15000
});
$('div').last().scrollText({
text: 'another acroll',
speed: 5000,
width: 50
})
}())
})
我需要将scrollText应用到具有自定义配置的尽可能多的元素而不覆盖。
注意当使用多个元素作为选择器调用 .scrollText 时，它的工作方式与上面的代码相同，但所有元素/实例的配置选项都相同
最佳答案
尝试将滚动对象重新定义为类
var Scroll = function () {
this.config = {
// initial config remain the same
}
};
Scroll.prototype.init = function (config) {
// init implementation remain the same
};
Scroll.prototype.animate = function (elem) {
// animate implementation remain the same
};
现在，通过此更改，您可以在scrollText 函数上实例化一个新的 Scroll 实例，如下所示:
$.fn.scrollText = function (config) {
return this.each(function () {
var obj = new Scroll(); // here is the change
obj.init({
text: config.text,
speed: config.speed,
width: config.width,
container: $(this),
parent: config.parent || $(this).parent(),
parentContainer: config.parentContainer || $(this).parent().parent()
}, this)
});
}
作为参数传递给 Object.create 的对象用作原型(prototype)来创建新对象。如果参数的某个属性是对象或函数，则该属性将用作对原始属性的引用。
了解有关 Object.create 的更多信息 here
关于javascript - javascript 对象的多个实例，无需覆盖配置选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25631395/