Scroll down the page…
Then click the box.
Scroll我想要完成的任务:使用javascript中的原型创建模块,以便用户可以使用不同的选项多次实例化模块。
问题 :使用
var my_module3 = new module();
然后尝试使用my_module3.init({ option: "value" });
设置选项my_module3.init({ option: "value" });
每次都不会更改对象,它只会更改一次。测试:当使用
console.log
我们可以看到它打印出具有相同选项的两个对象,即使它们设置不同Object {first: "Barry", second: "Larry", third: "Sam"} Object {first: "Barry", second: "Larry", third: "Sam"}
这是我的jsFiddle完整代码: http : //jsfiddle.net/11bLouc8/2/
var module = (function () { // default options var options = { first: "test", second: "test2", third: "test3" }; // take in useroptions and replace default options var module = function(userOptions) { if (userOptions != null && userOptions != undefined && userOptions != 'undefined') { for (var opt in options) { if (userOptions.hasOwnProperty(opt)) { options[ opt ] = userOptions[ opt ]; } } } }; //prototype module.prototype = { init: module, options: options }; return module; })(); // create a new instance var my_module3 = new module(); my_module3.init({ first: "Mike", second: "Lisa", third: "Mary" }); // another instance var my_module2 = new module(); my_module2.init({ first: "Barry", second: "Larry", third: "Sam" });
What I want to accomplish: Create modules using prototyping in javascript so that a user can instantiate a module multiple times each with different options.
The Problem: when using
var my_module3 = new module();
and then trying to set the options withmy_module3.init({ option: "value" });
does not change the object each time, it only changes it once.Testing: When using
console.log
we can see that it prints out the two objects with the same options even though they are set differentlyObject {first: "Barry", second: "Larry", third: "Sam"} Object {first: "Barry", second: "Larry", third: "Sam"}
Here is my jsFiddle full code: http://jsfiddle.net/11bLouc8/2/
var module = (function () { // default options var options = { first: "test", second: "test2", third: "test3" }; // take in useroptions and replace default options var module = function(userOptions) { if (userOptions != null && userOptions != undefined && userOptions != 'undefined') { for (var opt in options) { if (userOptions.hasOwnProperty(opt)) { options[ opt ] = userOptions[ opt ]; } } } }; //prototype module.prototype = { init: module, options: options }; return module; })(); // create a new instance var my_module3 = new module(); my_module3.init({ first: "Mike", second: "Lisa", third: "Mary" }); // another instance var my_module2 = new module(); my_module2.init({ first: "Barry", second: "Larry", third: "Sam" });
原文:https://stackoverflow.com/questions/26427639
你需要添加
ul
元素的scrolltop,而不是减去它:var offset = $(this).offset().top + $(this).parent().scrollTop();
片段:
$('li').click(function() { var offset = $(this).offset().top + $(this).parent().scrollTop(); $('ul').animate({ scrollTop: offset }, 500); });
ul { width: 200px; height: 300px; overflow: scroll; } li { margin-bottom: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>Sample 1</li> <li>Sample 2</li> <li>Sample 3</li> <li>Sample 4</li> <li>Sample 5</li> <li>Sample 6</li> <li>Sample 7</li> <li>Sample 8</li> <li>Sample 9</li> <li>Sample 10</li> <li>Sample 1</li> <li>Sample 2</li> <li>Sample 3</li> <li>Sample 4</li> <li>Sample 5</li> <li>Sample 6</li> <li>Sample 7</li> <li>Sample 8</li> <li>Sample 9</li> <li>Sample 10</li> </ul>
You need to add the
ul
element's scrolltop, not subtract it:var offset = $(this).offset().top + $(this).parent().scrollTop();
Snippet:
$('li').click(function() { var offset = $(this).offset().top + $(this).parent().scrollTop(); $('ul').animate({ scrollTop: offset }, 500); });
ul { width: 200px; height: 300px; overflow: scroll; } li { margin-bottom: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>Sample 1</li> <li>Sample 2</li> <li>Sample 3</li> <li>Sample 4</li> <li>Sample 5</li> <li>Sample 6</li> <li>Sample 7</li> <li>Sample 8</li> <li>Sample 9</li> <li>Sample 10</li> <li>Sample 1</li> <li>Sample 2</li> <li>Sample 3</li> <li>Sample 4</li> <li>Sample 5</li> <li>Sample 6</li> <li>Sample 7</li> <li>Sample 8</li> <li>Sample 9</li> <li>Sample 10</li> </ul>
Scroll down the page…
Then click the box.
Scroll