如何使我的插件在重复的HTML标记上工作，但单独操作
How do I make my plug-in work on duplicate HTML markup but operate separately?
我继承了Javascript和jQuery用于滑动带（转盘）模块。基本上，如果有更多的幻灯片要显示，左导航箭头和右导航箭头会出现在腰带的两侧。
jQuery和Javascript代码最初是一个单例，所以我决定将其转换为jQuery插件，以防belt HTML标记被实例化多次。我们有一个CMS，所以理论上多个皮带模块可以放在同一个模板上。
下面是测试页面，在同一页面上有两个皮带和相关的Javascript jQuery。我的问题是，当你点击箭头或幻灯片时，两条腰带都会做出反应，而不是我与之互动的腰带。
我想做的是，当我将插件连接到DIV时，我希望每条皮带相互独立地运行（即保留自己的局部变量、函数等）。
我不确定我在这里错过了什么。有人能指出我的错误并解释我做错了什么吗？（您应该能够将代码复制并粘贴到jsFiddle中，看看它目前是如何工作的。）
感谢您的阅读。
<html>
<head>
<title>Belt Test</title>
<style type="text/css">
div.belt { height: 95px; padding: 16px 0 6px 0; position: relative; width: 619px; }
div.belt span.scrollLeft,
div.belt span.scrollRight { display: none; padding-top: 30px; text-align: center; width: 48px; }
div.belt span.scrollLeft { float: left; }
div.belt span.scrollRight { float: right; }
div.belt span.scrollLeft a,
div.belt span.scrollRight a { background-color: transparent; background-repeat: no-repeat; background-image: url('http://img4.realsimple.com/static/i/gallery-sprite2.gif'); display: block; height: 24px; margin: 0 auto; outline: 0; width: 24px; text-decoration: none; }
div.belt span.scrollLeft a { background-position: -3px -679px; }
div.belt span.scrollRight a { background-position: -3px -650px; }
div.belt span.scrollLeft a:hover { background-position: -3px -737px; text-decoration: none; }
div.belt span.scrollRight a:hover { background-position: -3px -708px; text-decoration: none; }
div.belt div.wrapper { height: 87px; overflow: hidden; margin: 0 48px; position: relative; width: 522px; }
div.belt ul { height:87px; left: 0px; list-style-type: none; margin: 0; padding: 0; position: absolute; top: 0px; }
div.belt li { display:inline;float:left;padding:6px;}
div.belt li.selected { border: 1px solid #0099fe; padding: 5px; }
div.belt li a,
div.belt li a:hover { outline:none; text-decoration:none; }
div.belt li img { cursor: pointer; display: block; height: 75px; width: 75px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
/**
* @description jQuery Belt plug-in - Add default global belt behavior to ul-style belt where each click on the belt is a page refresh.
* This is a fixed belt with no customization allowed. Attach this plug-in to the div encapsulating the UL.
*/
$.fn.globalbelt = function() {
/* Inside .each(), this keyword refers to current DOM object */
return this.each(function() {
/* We save a reference to the current div element and use it for traversal later */
var self = this;
/* Variable initialization */
var slides = $('ul', self).find('li').size(), /* calc # of slides */
pages = Math.ceil(slides / 6), /* calc # of pages */
pageWidth = 522, /* width of one slide page */
shiftDuration = 400, /* animation duration */
currentPage = 1, /* current slide page */
beltSize = slides * 87; /* sets the width of the entire belt */
$('ul', self).css('width', beltSize + 'px');
/* hides/shows scrolling arrows */
setScrollButtons = function(){
if (currentPage <= 1) {
$('.scrollLeft', self).hide();
} else {
$('.scrollLeft', self).show();
}
if (currentPage >= pages) {
$('.scrollRight', self).hide();
} else {
$('.scrollRight', self).show();
}
}
/* hide / show buttons */
setScrollButtons();
/* Button event handler to scroll left */
$('.scrollLeft a', self).click(function(event){
currentPage--;
setScrollButtons();
$('ul', self).animate({ left: '+=' + pageWidth }, shiftDuration);
return false;
});
/* Button event handler to scroll right */
$('.scrollRight a', self).click(function(event){
currentPage++;
setScrollButtons();
$('ul', self).animate({ left: '-=' + pageWidth }, shiftDuration);
return false;
});
}); /* return this */
} /* End plug-in */
})(jQuery);
/* Implicitly iterate and bind the plug in to each div that match the selector */
$(document).ready(function() {
$('.belt').globalbelt();
});
</script>
</head>
<body>
<div class="belt">
<span class="scrollLeft">
<a href="#"> </a>
</span>
<span class="scrollRight">
<a href="#"> </a>
</span>
<div class="wrapper">
<ul>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
</ul>
</div>
</div>
<div class="belt">
<span class="scrollLeft">
<a href="#"> </a>
</span>
<span class="scrollRight">
<a href="#"> </a>
</span>
<div class="wrapper">
<ul>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
<li><a href="#"><img src="http://l.yimg.com/a/p/fi/39/03/54.jpg" title="1" alt="1" border="0" height="75" width="75" /></a></li>
</ul>
</div>
</div>
</body>
</html>
这在没有ID的情况下应该是可行的。您只需要在DOM中查找所处的特定div，获取元素对象引用，然后只在DOM的特定子树中执行操作。
因此，在你的点击功能中，你会添加：
$('.scrollLeft a', self).click(function(event){
var parentDiv = $(this).parents(".belt");
currentPage--;
setScrollButtons(parentDiv);
//...rest of your code...
因此，现在您有了一个对特定皮带元素的引用，该引用将传递给辅助函数。您可以通过以下方式修改您的助手功能：
setScrollButtons = function(parentDiv){
if (currentPage <= 1) {
parentDiv.find('.scrollLeft', self).hide();
} else {
parentDiv.find('.scrollLeft', self).show();
}
if (currentPage >= pages) {
parentDiv.find('.scrollRight', self).hide();
} else {
parentDiv.find('.scrollRight', self).show();
}
}
这样，您仍然只按类进行选择，但您将jQuery从中选择的元素限制在parentDiv的子树中。
除非出现任何JS范围界定问题，否则应该会起作用。如果遇到范围界定问题，可能需要重构代码。
我从未听说过"皮带"这个词。它通常被称为旋转木马。
也就是说，在jQuery中，您可以通过单独选择（通过唯一的ID或CSS3选择器，或者获取所有ID并在jQuery中将其遍历）来实例化每个ID，然后在执行过程中传递每个ID的设置/变量。
所以，不是：
$('.belt').globalbelt();
我建议：
$('#belt1').globalbelt();
$('#belt2').globalbelt();
$('#belt3').globalbelt();
两条皮带都响应的原因是代码绑定到两次点击。
在指定事件处理程序向左滚动的函数中，将目标指定为事件发生的div。当前代码没有该"上下文"信息。
将事件处理程序更改为
$('.scrollLeft a', self).click(function(event){
self = event.currentTarget.parentElement.parentElement;
currentPage--;
setScrollButtons();
$('ul', self).animate({ left: '+=' + pageWidth }, shiftDuration);
return false;
});
这将按预期进行。
相关文章：
- button.单击两次删除附加操作后不工作
- Var工作，但在使用数组执行相同操作时停止
- 如何使用javascript操作SVG节点，使其在MS Edge中工作
- 使用像素操作修改画布在某种程度上不会;我不能完全在IE9中工作
- 为什么在ASP.NET Ajax更新面板中执行任何操作后javascript元素都停止工作
- 安排工作在触发其他操作后进行
- Chrome扩展程序:浏览器操作单击按钮工作一次
- 将搜索按钮从一个站点复制到另一个站点:此搜索按钮如何工作，以及如何重现其操作
- 在javascript中，哪个操作需要浏览器做更多的工作
- 滚动不'在移动浏览器中执行手势操作后无法工作
- appMobi/phonegap设置/删除cookie点击操作需要2次才能工作
- 筛选器操作后，工具提示停止工作
- 提交时无法正常工作.即使输入字段为空，它仍然会转到表单操作
- 表单操作无法正常工作.它不会移动到指令链接，即<表单 action=“”>
- 如何使这个Javascript与特定的操作形式一起工作
- 在执行 h:命令链接操作时显示工作图像
- 无法让Gmail一键确认操作按钮工作
- JQuery 单击操作只工作一次
- testswarm清理操作不会;似乎工作不正常
- 操作历史记录.Back无法按预期工作
