- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在过去的几天里,我一直在制作自己的雨伞。
我的 Jquery 基于网络上的教程以及来自 SO 的帮助和建议。
我不是 Jquery 大师,只是一个爱好者,我认为我的代码有点草率,因此发表了这篇文章。
这里是工作代码的链接:http://jsfiddle.net/JHqBA/2/ (更新链接)
基本上发生的事情是:如果有人在 url 中点击带有 # 值的页面,它将显示适当的幻灯片,示例为 www.hello.com#two,这将滑动到第二张幻灯片
如果有人点击数字,它会显示相应的幻灯片
next 和 prev 也在幻灯片中滑动。
问题是,有没有什么我可以写得更好的,因为我知道有很多重复的代码。
我明白这是一个很大的问题,但它会帮助我学到更多(我认为我的代码有点老派)
如果有人有任何问题,请随时提问,我会回答它做什么或应该做什么。
啪啪啪
--- 编辑 ----
我现在只做了一个动画函数,去掉了很多重复的代码。
我还没有研究功能,但很快就会研究。
我想了解更多关于在 jQuery 就绪 block 之外创建一个新函数的信息,因为我无法使它正常工作或完全理解如何让它正常工作,抱歉
在我对它感到满意之前,任何更多的提示都会非常有用,我会继续从事这个项目。
还有没有更好的写法:
if ($slideNumber == 1) {
$('#prev').attr("class", "not_active")
$('#next').attr("class", "active")
}
else if ($slideNumber == divSum) {
$('#next').attr("class", "not_active");
$('#prev').attr("class", "active");
}
else {
$('#prev').attr("class", "active")
$('#next').attr("class", "active")
};
完整的 Jquery:
$(document).ready(function () {
//////////////////////////// INITAL SET UP /////////////////////////////////////////////
//Get size of images, how many there are, then determin the size of the image reel.
var divWidth = $(".window").width();
var divSum = $(".slide").size();
var divReelWidth = divWidth * divSum;
//Adjust the image reel to its new size
$(".image_reel").css({ 'width': divReelWidth });
//set the initial not active state
$('#prev').attr("class", "not_active");
//////////////////////////// SLIDER /////////////////////////////////////////////
//Paging + Slider Function
rotate = function () {
var triggerID = $slideNumber - 1; //Get number of times to slide
var image_reelPosition = triggerID * divWidth; //Determines the distance the image reel needs to slide
//sets the active on the next and prev
if ($slideNumber == 1) {
$('#prev').attr("class", "not_active")
$('#next').attr("class", "active")
}
else if ($slideNumber == divSum) {
$('#next').attr("class", "not_active");
$('#prev').attr("class", "active");
}
else {
$('#prev').attr("class", "active")
$('#next').attr("class", "active")
};
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500);
};
//////////////////////////// SLIDER CALLS /////////////////////////////////////////////
//click on numbers
$(".paging a").click(function () {
$active = $(this); //Activate the clicked paging
$slideNumber = $active.attr("rel");
rotate(); //Trigger rotation immediately
return false; //Prevent browser jump to link anchor
});
//click on next button
$('#next').click(function () {
if (!$(".image_reel").is(':animated')) { //prevent clicking if animating
var left_indent = parseInt($('.image_reel').css('left')) - divWidth;
var slideNumberOn = (left_indent / divWidth);
var slideNumber = ((slideNumberOn * -1) + 1);
$slideNumber = slideNumber;
if ($slideNumber <= divSum) { //do not animate if on last slide
rotate(); //Trigger rotation immediately
};
return false; //Prevent browser jump to link anchor
}
});
//click on prev button
$('#prev').click(function () {
if (!$(".image_reel").is(':animated')) { //prevent clicking if animating
var left_indent = parseInt($('.image_reel').css('left')) - divWidth;
var slideNumberOn = (left_indent / divWidth);
var slideNumber = ((slideNumberOn * -1) - 1);
$slideNumber = slideNumber;
if ($slideNumber >= 1) { //do not animate if on first slide
rotate(); //Trigger rotation immediately
};
}
return false; //Prevent browser jump to link anchor
});
//URL eg:www.hello.com#one
var hash = window.location.hash;
var map = {
one: 1,
two: 2,
three: 3,
four: 4
};
var hashValue = map[hash.substring(1)];
//animate if hashValue is not null
if (hashValue != null) {
$slideNumber = hashValue;
rotate(); //Trigger rotation immediately
return false; //Prevent browser jump to link anchor
};
});
最佳答案
1) 关注点分离
首先将您的代码重构为更精细的函数。您可以在 http://en.wikipedia.org/wiki/Separation_of_concerns 阅读更多关于 SoF 的信息
更新:例如。不要让你的卷轴大小调整代码内联,而是把它放在它自己的函数中,就像这样:
function setImageReelWidth () {
//Get size of images, how many there are, then determin the size of the image reel.
var divWidth = $(".window").width();
var divSum = $(".slide").size();
var divReelWidth = divWidth * divSum;
//Adjust the image reel to its new size
$(".image_reel").css({ 'width': divReelWidth });
}
这实现了两件事:
一个。首先,它将逻辑上内聚的代码块分组,将其从主代码中删除,从而产生更清晰的代码栖息地。 b.它通过描述其功能的函数名称有效地为代码块提供了一个标签,从而使代码的理解变得更加简单。
之后,你也可以将整个东西封装在它自己的“类”(函数)中,你可以将它移动到它自己的js文件中。
2) jQuery“on”函数
使用“on”函数来附加您的点击事件,而不是“click”函数。 http://api.jquery.com/on/这还有一个额外的好处,即可以将它绑定(bind)到与您的选择器匹配的 future 元素,即使它们尚不存在。
3)就绪函数
// I like the more succinct:
$(handler)
// Instead of:
$(document).ready(handler)
但您可能喜欢更明显的语法。
这些只是开始的几件事。
-- 更新 1 --
好吧,StackOverflow 并不真正适合进行中的重构工作,但我们会凑合着做。我认为你应该在你的问题中保留你的原始代码块,以便 future 的读者可以看到它从哪里开始以及它是如何系统地改进的。
I would like to know more about the create a new function, outside of the jQuery ready block as i cant get this working or quite understand how i can get it to work sorry
我不熟悉 jsfiddle.net,但它看起来很酷而且很有帮助,但如果您不知道发生了什么,也可能会有点困惑。我不确定我这样做了 :),但我认为脚本编辑器窗口会生成一个 .js 文件,该文件会自动被 html 文件引用。
所以这里有一个在 ready block 之外定义但从内部引用的函数示例。
function testFunction () {
alert ('it works');
}
$(document).ready(function () {
testFunction();
// ... other code
});
这应该会在页面加载时弹出一个警告框,提示“它有效”。你可以自己试试。然后,一旦你开始工作,你就可以将其他逻辑上内聚的代码块重构为它们自己的函数。稍后您可以将它们全部包装到它们自己的 javascript“类”中。但我们会做到这一点。
关于javascript - Jquery - Carasol 构建完成并希望获得有关最佳实践/整理我的代码的建议,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9128630/
当我创建一个数据库时,我被要求选择默认排序规则,当我创建一个表时,我被要求选择排序规则。 utf8_general_ci 或...拉丁...?区分哪个是对的依据是什么? 最佳答案 A collatio
PHP不会检查单引号 '' 字符串中变量内插或(几乎)任何转义序列,所以采用单引号这种方式来定义字符串相当简单快捷。但是,双引号 "" 则不然,php会检查字符串中的变量或者转义
正则(regular),要使用正则表达式需要导入Python中的re(regular正则的缩写)模块。正则表达式是对字符串的处理,我们知道,字符串中有时候包含很多我们想要提取的信息,掌握这些处理字符
在开发过程中,有时需要对用户输入的类型做判断,最常见是在注册页面即用户名和密码,代码整理如下: 只能为中文 ?
]js正则表达式基本语法(精粹): http://www.zzvips.com/article/94068.html 许多语言,包括P
1、首先安装mongodb 1.下载地址:http://www.mongodb.org/downloads 2.解压缩到自己想要安装的目录,比如d:\mongodb 3.创建文件夹d:\mo
我更愿意在 R 中执行以下操作,但我愿意接受(易于学习的)其他解决方案。 我有多个(比如说 99 个)制表符分隔文件(我们称它们为 S1.txt 到 S99.txt)和表格,所有文件都具有完全相同的格
我制作了一个小程序,可以使用数学进行物理计算。 我有几个 if 语句,它们做同样的事情,但变量不同,但它们必须是它们,就好像 TextBox 是空的,int 将是 0。 例子如下: if (first
我正在构建需要扩展框的东西 - 这很好,我可以正常工作。然而,如果你看看这个FIDDLE你会看到它有点乱。我希望有一种方法可以扩展它们所在的盒子,这样它们就不会跳来跳去?那么盒子 3 的左侧会比右侧膨
我相当确定(在 MATLAB 中)应该有一个优雅的解决方案,但我现在想不起来。 我有一个包含 [classIndex, start, end] 的列表,我想将连续的类索引折叠成一个组,如下所示: 这个
维基百科将 XMPP 定义为: ...an open-standard communications protocol for message-oriented middleware based on
我的代码库已经进入了某种状态,希望能够摆脱它 repo 看起来有点像这样(A1、B1、C1 等显然是提交) A1 ---- A2 ---- A3 ---- A4 -
如何整理以下数据框 data.frame(a = c(1,2), values = c("[1.1, 1.2, 1.3]", "[2.1, 2.2]")) a values 1
所以我试图在 Haskell 中生成出租车号码列表。出租车号码是可以用两种不同方式写成两个不同立方体之和的数字 - 最小的是 1729 = 1^3 + 12^3 = 9^3 + 10^3 . 现在,我
我正在使用 roxygen2 来记录我正在开发的包的数据集。我知道你可以 use roxygen to document a dataset ,但是Shane's answer最终建议进行黑客攻击,虽
这个问题在这里已经有了答案: How can I combine two strings together in PHP? (19 个回答) 关闭 5 年前。 提前致歉,尽管我已经尝试并失败了几件不
我有一个大部分整洁的数据框,但有 2 列包含基准,而不是将基准合并为观察结果。我该如何整理,以便将“Facility_score”和“TTP”col_names 添加为每个独特的 FYQ 和 Metr
我有以下输入数据。每一行都是一个实验的结果: instance algo profit time x A 10 0.5 y A
我已经使用 PHP 和 MySQL 实现了搜索。目前我的表格整理是 "utf8_unicode_ci"。问题是,使用此排序规则 "ä"= "a" 是。如果我将排序规则更改为 "utf_bin" 一切正
所以我是 JS 和 Jquery 库的新手。我一直在玩弄一些东西,可以看到它非常不整洁,这就是我希望你们能帮助建议一种更好的方法来实现我想要实现的目标的地方。 目标: 要有多个复选框,其中一些如果被选
我是一名优秀的程序员,十分优秀!