Объедините два обработчика в один JQuery

В более раннем вопросе, который я разместил, кто-то упомянул, что я могу объединить два обработчика вместе, чтобы спасти себя от ввода кода дважды. Два обработчика кликов, которые у меня есть, делают дубликат кода, но я не уверен, как организовать их в одну функцию, так что, когда я нажимаю кнопку со стрелкой влево, функция знает, что я нажал левую кнопку и отвечаю соответственно, а также с стрелка вправо. Я предполагаю, что у меня будет оператор if, но мне нужно, чтобы каждая кнопка запускала аргумент через функцию? Как мне это сделать?Объедините два обработчика в один JQuery

Код ниже проходит через список изображений в 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>

источник

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, как показано ниже. Вы можете идентифицировать нажатую кнопку, будь то слева или справа, используя идентификатор кнопки и соответственно создать логику.

$(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

ответ

Смежные вопросы