將兩個處理程序組合成一個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

回答

相關問題