将两个处理程序合并为一个 Jquery

Question

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

下面的代码遍历 HTML 中的图像列表并找到合适的图像放置在灯箱上。我可以从上到下和从下到上浏览列表。我还可以从第一个 child 移动到最后一个 child，反之亦然。我只是不确定这两者是否可以结合在一起。

这些按钮以编程方式附加到叠加层。

var $arrowLeft = $('<button id="left" class="arrow">&lsaquo;</button>');
var $arrowRight = $('<button id="right" class="arrow">&rsaquo;</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>

Answer 1

您的回调具有包含按下哪个键的事件参数。

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

根据 W3C，它的值应该是：

左键 – 0 中间按钮 - 1 右键 – 2

Answer 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 是您可以放在箭头按钮上的 class。或者，您可以将点击处理程序绑定到父元素。逻辑保持不变。

Answer 3

试试这个：您可以使用 id 选择器绑定点击事件处理程序，如下所示。您可以使用按钮的 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;
        }
    });
});

Answer 4

您可以使用（如前所述）目标来确定按钮。你也可能有两个调用同一个函数的handler，我打个例子说明一下，希望你明白原理（没测试过）

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

将两个处理程序合并为一个 Jquery

Combine two handlers into one Jquery

javascript

jquery

onclick

handler