Question

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

下面的代码循环遍历HTML中的图像列表，并找到放置在灯箱上的相应图像。我可以从上到下，从下到上查看列表。我也可以从第一个孩子搬到最后一个孩子，反之亦然。我不确定这两者是否可以结合在一起。

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

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

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

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

Answer 2

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

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

根据W3C，它的值应该是：

左键 - 0 中键 - 1 右键 - 2

Answer 3

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

Answer 4

试试这个：你可以使用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;
        }
    });
});

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

4 个答案: