在我之前发布的问题中，有人提到我可以将两个处理程序组合在一起，以免自己输入两次代码。下面的两个单击处理程序执行重复的代码，但我不确定如何将它们组织成一个函数，以便当我单击向左箭头按钮时，该函数知道我单击了向左按钮并做出相应响应，同样地，右箭头按钮。我想我会有一个 if 语句，但我是否需要让每个按钮通过该函数运行一个参数？我该怎么做？
下面的代码循环遍历 HTML 中的图像列表，并找到合适的图像放置在灯箱上。我可以从上到下、从下到上浏览列表。我还可以从第一个 child 移动到最后一个 child ，反之亦然。我只是不确定这两者是否可以结合在一起。
这些按钮以编程方式附加到叠加层。
var $arrowLeft = $('<button id="left" class="arrow">‹</button>');
var $arrowRight = $('<button id="right" class="arrow">›</button>');
左右箭头处理程序:
//When left arrow is clicked
$arrowLeft.click(function() {
$('#imageGallery li a img').each(function() {
var galleryImage = $(this);
if (galleryImage.attr('src') === $image.attr('src')) {
var li = galleryImage.closest('li');
if (li.is(':first-child')) {
var gallery = li.parent();
var lastLi = gallery.children(':last-child');
var anchor = lastLi.children('a');
var image = anchor.children('img');
$image.attr('src', image.attr('src'));
} else {
var prevLi = li.prev();
var anchor = prevLi.children('a');
var image = anchor.children('img');
$image.attr('src', image.attr('src'));
}
return false;
}
});
});
//When right arrow is clicked
$arrowRight.click(function() {
$('#imageGallery li a img').each(function() {
var galleryImage = $(this);
if (galleryImage.attr('src') === $image.attr('src')) {
var li = galleryImage.closest('li');
if (li.is(':last-child')) {
var gallery = li.parent();
var firstLi = gallery.children(':first-child');
var anchor = firstLi.children('a');
var image = anchor.children('img');
$image.attr('src', image.attr('src'));
} else {
var nextLi = li.next();
var anchor = nextLi.children('a');
var image = anchor.children('img');
$image.attr('src', image.attr('src'));
}
return false;
}
});
});
HTML:
<body>
<h1>Image Gallery</h1>
<ul id="imageGallery">
<li><a href="images/refferal_machine.png"><img src="images/refferal_machine.png" width="100" alt="Refferal Machine By Matthew Spiel"></a></li>
<li><a href="images/space-juice.png"><img src="images/space-juice.png" width="100" alt="Space Juice by Mat Helme"></a></li>
<li><a href="images/education.png"><img src="images/education.png" width="100" alt="Education by Chris Michel"></a></li>
<li><a href="images/copy_mcrepeatsalot.png"><img src="images/copy_mcrepeatsalot.png" width="100" alt="Wanted: Copy McRepeatsalot by Chris Michel"></a></li>
<li><a href="images/sebastian.png"><img src="images/sebastian.png" width="100" alt="Sebastian by Mat Helme"></a></li>
<li><a href="images/skill-polish.png"><img src="images/skill-polish.png" width="100" alt="Skill Polish by Chris Michel"></a></li>
<li><a href="images/chuck.png"><img src="images/chuck.png" width="100" alt="Chuck by Mat Helme"></a></li>
<li><a href="images/library.png"><img src="images/library.png" width="100" alt="Library by Tyson Rosage"></a></li>
<li><a href="images/boat.png"><img src="images/boat.png" width="100" alt="Boat by Griffin Moore"></a></li>
<li><a href="images/illustrator_foundations.png"><img src="images/illustrator_foundations.png" width="100" alt="Illustrator Foundations by Matthew Spiel"></a></li>
<li><a href="images/treehouse_shop.jpg"><img src="images/treehouse_shop.jpg" width="100" alt="Treehouse Shop by Eric Smith"></a></li>
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
最佳答案
您可以使用(如已经回答的那样)目标来确定按钮。 你也可能有两个调用同一个函数的处理程序，我举了一个例子来解释我的意思，我希望你明白原理(没有测试)
//When left arrow is clicked
$arrowLeft.click(function() {
moveImages(true);
});
//When right arrow is clicked
$arrowRight.click(function() {
moveImages(false);
});
function moveImages(topToBottom) {
var ttb = ':last-child';
if(topToBottom) {
ttb = ':first-child';
}
$('#imageGallery li a img').each(function() {
var galleryImage = $(this);
if (galleryImage.attr('src') === $image.attr('src')) {
var li = galleryImage.closest('li');
if (li.is(ttb)) {
var gallery = li.parent();
var aLi = gallery.children(ttb);
var anchor = aLi.children('a');
var image = anchor.children('img');
$image.attr('src', image.attr('src'));
} else {
var theLi;
if(topToBottom) {
theLi = li.next();
} else {
theLi = li.prev();
}
var anchor = theLi.children('a');
var image = anchor.children('img');
$image.attr('src', image.attr('src'));
}
return false;
}
});
};
关于javascript - 将两个处理程序合并为一个 Jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32969600/