简化 jQuery/Javascript 代码
Simplifying jQuery/Javascript code
我一直在尝试使用"$(input[data-code]").each"函数来简化我的代码,以简化代码。代码只是在用户单击锚链接时进行处理,它会将其动画化到该位置,如下所示:
$('a.welcome').click(function(){
$('html, body').animate({scrollTop:0}, 2000, function() {
parallaxScroll();
});
return false;
});
$('a.step1').click(function(){
$('html, body').animate({scrollTop: $('#step1').offset().top - 70}, 2000, function() {
parallaxScroll();
});
return false;
});
$('a.step2').click(function(){
$('html, body').animate({scrollTop: $('#step2').offset().top - 70}, 2000, function() {
parallaxScroll();
});
return false;
});
$('a.step3').click(function(){
$('html, body').animate({
scrollTop: $('#step3').offset().top - 70
}, 2000, function() {
parallaxScroll();
});
return false;
});
到目前为止,我想出的简化方法如下所示:
$("input[data-code]").each(function() {
$(this).click(function(){
$('html, body').animate({
scrollTop: $($(this).data("code")).offset().top - 70
}, 2000, function() {
parallaxScroll();
});
return false;
});
});
但它似乎不起作用:(
我的理论是,$(this).click(function(){
实际上并没有正确地调用样式中的元素$(a.welcome).click(function(){
链接的实际 HTML 如下所示:
<nav id="primary">
<ul>
<li>
<h1>Welcome</h1>
<a class="welcome" href="#welcome" data-code="0">View</a>
</li>
<li>
<h1>Step 1: Setup</h1>
<a class="step1" href="#step1" data-code="#step1">Step 1</a>
</li>
<li>
<h1>Step 2: Data Management</h1>
<a class="step2" href="#step2" data-code="#step2">Step 2</a>
</li>
<li>
<h1>Step 3: Configure Cameras</h1>
<a class="step3" href="#step3" data-code="#step3">View</a>
</li>
</ul>
</nav>
有什么想法吗?
我想
我会这样做。您希望定位锚标记。
$("a[data-code]").click(function(){
var val = $(this).data("code") ? $($(this).data("code")).offset().top - 70 : 0;
$('html, body').animate({
scrollTop: val
}, 2000, function() {
parallaxScroll();
});
return false;
});
一个简单的
$('#scroll a').click(function(){
$('html, body').animate({scrollTop: $(this).offset().top - 70}, 2000,
function() {
parallaxScroll();
});
return false;
});
并向ul
添加id = "scroll"
<nav id="primary">
<ul id = "scroll">
<li>
<h1>Welcome</h1>
<a class="welcome" href="#welcome" data-code="0">View</a>
</li>
<li>
<h1>Step 1: Setup</h1>
<a class="step1" href="#step1" data-code="#step1">Step 1</a>
</li>
<li>
<h1>Step 2: Data Management</h1>
<a class="step2" href="#step2" data-code="#step2">Step 2</a>
</li>
<li>
<h1>Step 3: Configure Cameras</h1>
<a class="step3" href="#step3" data-code="#step3">View</a>
</li>
</ul>
</nav>
会工作。
你的jQuery代码的目标是HTML输入标签而不是锚标签。
改变:
$("input[data-code]").each(function() {
自:
$("a[data-code]").each(function() {
你可以在点击函数中使用它
$('#primary a').on('click', function () {
var offSet = $($(this).data('code')).offset().top - 70;
if ($(this).is('.welcome')) {
offSet = 0;
}
$('html, body').animate({
scrollTop: offSet
}, 2000,
function () {
parallaxScroll();
});
return false;
});
相关文章:
- 云代码(javascript)失败,原因是:{代码:1,消息:内部错误
- 简化此If语句,使其不会't重复代码-Javascript
- 十进制到二进制代码Javascript
- 第二次单击时执行不同的代码(JavaScript)
- 在不使用jquery($symbol)knockout.js的情况下分离代码javascript
- 缩短几个元素的onclick代码 - JavaScript
- 英国银行排序代码 JavaScript 正则表达式
- 我无法在谷歌图表的代码 javascript 中获取 json 数据(项目 Python Hello Dashboard
- 和代码 JavaScript 没有被 &.
- 我怎样才能减少这段代码 javascript 代码,这样它就不会那么重复了
- 我想单击一个按钮,一次只执行已经制作的程序中的一行代码.(JavaScript)
- 滑动 DIV 代码 Javascript 的小问题
- 尝试重写代码 JavaScript
- 是否可以检测到在不使用键代码 javascript 的情况下按下了输入键
- 输入网址代码 JavaScript 播放器
- 管理通用客户端代码(javascript/css)
- 理解代码javascript
- 加载json-url参数代码(javascript修改)
- 变量检查错误的代码(javascript)
- css属性仅由代码javascript应用