Как я могу сделать перемещение движущегося div, нажав кнопку вместо перемещения, нажав на div?

Question

Я использовал это jsFiddle для реализации groupon (groupon.com), как div на веб-странице, которую я разрабатываю.

Мой вопрос: вместо того, чтобы щелкнуть правой кнопкой мыши на div, чтобы переместить его, как бы вы установили его так, чтобы у каждого из них была кнопка, и вам нужно нажать кнопку (расположенную на div), чтобы перейти к следующему div, а не просто щелкнуть по самому div без кнопки?

Вся помощь более чем признательна!

Answer 1

http://jsfiddle.net/ykbgT/2446/

же код, только переделаны так, что, когда линия связи (или кнопка) нажата она делает то же самое, но вместо того, чтобы использовать $ (это) (который раньше был в DIV), теперь вы делаете $ (это) .parent() (поскольку $ (this) является ссылкой, а родительский - div)

Редактировать: обновлено для кэширования родителя.

Answer 2

Я обновляю вашу скрипку с существующим кодом, просто взгляните на this demo.

$('.box button').click(function() { 
    $('.box').each(function() { 
     if ($(this).offset().left < 0) { 
      $(this).css("left", "150%"); 
     } 
    }); 

    var t=$(this); 
    t.parent().animate({ left: '-50%' }, 500); 
    if (t.parent().next().size() > 0) { 
     t.parent().next().animate({ left: '50%' }, 500); 
    } 
    else{ 
     t.parent().prevAll().last().animate({ left: '50%' }, 500); 
    } 
}); 

Answer 3

Html Пример

<div id="container"> 
    <div id="box1" class="box"><button class="button">Div #1</input></div> 
    <div id="box2" class="box"><button class="button">Div #2</input></div> 
    <div id="box3" class="box"><button class="button">Div #3</input></div> 
    <div id="box4" class="box"><button class="button">Div #4</input></div> 
    <div id="box5" class="box"><button class="button">Div #5</input></div> 
</div> 

Пример сценария

$('.box .button').click(function() { 
    $('.box').each(function() { 
     var $currentBox = $(this); 

     if ($currentBox.offset().left < 0) { 
      $currentBox.css("left", "150%"); 
     } 
    }); 

    var $currentDiv = $(this).parent(); 

    $currentDiv.animate({ 
     left: '-50%' 
    }, 500); 

    if ($currentDiv.next().size() > 0) { 
     $currentDiv.next().animate({ 
      left: '50%' 
     }, 500); 
    } else { 
     $currentDiv.prevAll().last().animate({ 
      left: '50%' 
     }, 500); 
    } 
}); 

См DEMO