Javascript 将两个处理程序组合成一个Jquery

在我之前发布的一个问题中，有人提到我可以将两个处理程序组合在一起，以避免自己两次键入代码。我下面的两个单击处理程序有重复的代码，但我不确定如何将它们组织成一个函数，以便当我单击左箭头按钮时，该函数知道我单击了左按钮并相应地响应，同样，右箭头按钮也会响应。我想我会有一个if语句，但是我需要让每个按钮在函数中运行一个参数吗？我该怎么做

下面的代码循环浏览HTML中的图像列表，并找到要放置在lightbox上的适当图像。我可以从上到下，从下到上浏览这个列表。我也可以从第一个孩子移动到最后一个孩子，反之亦然。我只是不确定这两者是否可以结合在一起

这些按钮以编程方式附加到覆盖中

var $arrowLeft = $('<button id="left" class="arrow">&lsaquo;</button>');
var $arrowRight = $('<button id="right" class="arrow">&rsaquo;</button>');

HTML:

图像库

您的回调具有事件参数，其中包含已按下的键

$('a').mousedown(function(f) {
   if (f.which == 0) {
       alert('left button')
   }
   else if(f.which == 2) {
       alert("right click");
   }
})​

根据W3C，其值应为：

左按钮–0 中间按钮–1

---

右键–2

使用

e.target

查找单击的按钮

大致如下：

$('a.arrows').on('click', function(e) {
    // ... your common variables here
    if(e.target.id === 'leftArrow') {
        // ... your logic for left arrow
    } else {
        // ... your logic for right arrw
    }
});

---

其中，

arrows

是一个可以放在箭头按钮上的类。或者，可以将单击处理程序绑定到父元素。逻辑保持不变。

试试这个：您可以使用id选择器绑定click事件处理程序，如下所示。您可以使用按钮的id识别单击的按钮是左按钮还是右按钮，并相应地创建逻辑

$(document).on('click','#left, #right' ,function() {
    var id = $(this).attr('id');
    var liCheck = ':first-child';
    var childCheck = ':last-child';

    //for right button swap the child and li check
    if(id == 'right')
    {
      childCheck = ':first-child';
      liCheck = ':last-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(liCheck)) {
                var gallery = li.parent();
                var childLi = gallery.children(childCheck);
                var anchor = childLi.children('a');
                var image = anchor.children('img');
                $image.attr('src', image.attr('src'));
            } else {
                var childLi = li.prev();
                //for right button update child li
                if(id == 'right')
                {
                  childLi = li.next();
                }
                var anchor = childLi.children('a');
                var image = anchor.children('img');
                $image.attr('src', image.attr('src'));
            }
            return false;
        }
    });
}); 

您可以使用（如已回答的）目标来确定按钮。 您可能还有两个调用相同函数的处理程序，我举了一个例子来解释我的意思，我希望您理解这个原理（没有测试它）

---

标记中的左右按钮在哪里？您可以在泛型元素上绑定处理程序，然后通过事件委派使用

e.target

查找单击的按钮。它们通过编程方式添加到覆盖中。如果需要，我可以发布它们。请使用html代码发布。您也可以使用

$arrowLeft.添加（$arrowRight）。在（'click'，moveImages）

和

moveImages

中查看所单击元素的id（

this.id）

。感谢大家提供的示例。我喜欢你的@Xavjer，因为我还可以在另一个我一直在修补的js应用程序中实现同样的示例。我改变了一些东西，但从总体上看，它们与你在这里发布的内容相比非常小。谢谢缺少一个

，

=>

“#左#右”

和

$（this）.attr（'id'）

可以是

this.id

$('a.arrows').on('click', function(e) {
    // ... your common variables here
    if(e.target.id === 'leftArrow') {
        // ... your logic for left arrow
    } else {
        // ... your logic for right arrw
    }
});

$(document).on('click','#left, #right' ,function() {
    var id = $(this).attr('id');
    var liCheck = ':first-child';
    var childCheck = ':last-child';

    //for right button swap the child and li check
    if(id == 'right')
    {
      childCheck = ':first-child';
      liCheck = ':last-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(liCheck)) {
                var gallery = li.parent();
                var childLi = gallery.children(childCheck);
                var anchor = childLi.children('a');
                var image = anchor.children('img');
                $image.attr('src', image.attr('src'));
            } else {
                var childLi = li.prev();
                //for right button update child li
                if(id == 'right')
                {
                  childLi = li.next();
                }
                var anchor = childLi.children('a');
                var image = anchor.children('img');
                $image.attr('src', image.attr('src'));
            }
            return false;
        }
    });
}); 

//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;
        }
    });
};