滑出jquery div只能在一個按鈕上工作？

Question

請參閱this link

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> 

因爲我們是不允許有多個ID在DOM。

和這是所有你需要：而不是ID的

LIVE DEMO

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

Answer 2

使用類，同一ID的不能在頁面中使用。