滑出jQuery div仅适用于一个按钮？

Question

请看这个链接

HTML

 <div id="getitnow">btn 1</div>
 <div id="getitnow">btn 2</div>
 <div id="getitnow">btn 3</div>
 <div id="getitnow">btn 4</div>

 <div id="slideout">
   <div id="containclickme">
   </div>
 </div>

CSS

#slideout {
background: #666;
position: relative;
width: 300px;
height: 80px;
right:-300px;
margin-top:50px;
float:right;
}

#getitnow {
padding:10px;
border:1px solid #ccc;
width:100px;
}

脚本

$(function () {
// cache the sliding object in a var
var slideout = $('#slideout');
// click-me not clickme
$("#getitnow").toggle(function () {
    // use cached object instead of searching
    slideout.animate({
        right: '0px'
    }, {
        queue: false,
        duration: 500
    });
}, function () {
    // use cached object instead of searching        
    slideout.animate({
        right: '-300px'
    }, {
        queue: false,
        duration: 500
    });
});
});

无论您单击哪个按钮，我都试图使div幻灯片正常工作。

当您单击第一个按钮时，它如何滑出？

我究竟做错了什么？

Answer 1

使用类别：

<div class="getitnow"></div>

因为我们不允许在DOM中使用多个ID 。

这就是您所需要的：

现场演示

var $slideout = $('#slideout');
$(".getitnow").click(function () {
    var inView = parseInt($slideout.css('right'), 10) < 0;
    $slideout.stop().animate({ right: (inView ? 0 : -300) }, 500);
});

Answer 2

使用class代替id，不能在页面中使用相同的id。