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

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

以下代码循环显示HTML中的图像列表，并找到合适的图像放置在Lightbox上。我可以从顶部到底部，从底部到顶部查看列表。我也可以从第一个孩子到最后一个孩子，反之亦然。我不确定这两者是否可以结合在一起。

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

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>

来源

2015-10-06 John Coolidge

哪里是在左边和右边的按钮进行标记？你可以在通用元素上绑定你的处理程序，然后用事件委托使用'e.target'来查找哪个按钮被点击。 – Abhitalks

它们以编程方式添加到叠加层。如果需要，我可以发布它们。 –

请用html代码发布 –

您可以使用（如已经回答的）目标来确定按钮。您还可能有两种处理该调用同一个函数，我做了一个例子来说明我的意思，我希望你明白一个道理（没有测试）

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

来源

2015-10-06 12:25:03 Xavjer

您也可以做'$ arrowLeft.add（$ arrowRight）.on（'click'，moveImages）'在'moveImages'中查看单击元素的id（'this.id）'。 – lshettyl

谢谢大家的例子。我喜欢你的@Xavjer，因为我也可以在我一直在修补的另一个js应用中实现这个例子。我改变了一些东西，但是在事物的宏伟计划中，它们与你在此发布的内容相比很小。谢谢！ –

很高兴我能帮到你 – Xavjer

你的回调有一个包含已按下哪个键事件参数。

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

根据W3C其值应为：

左键 - 0 中间按钮 - 1个向右按钮 - 2

来源

2015-10-06 12:14:55 Grissom

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

来源

2015-10-06 12:19:54 Abhitalks

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

来源

2015-10-06 12:23:50

缺少'''''''''''#left＃right''和'$（this）.attr（'id'）'可能只是'this.id' – lshettyl

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

回答

相关问题