这里需要帮助
我创建分享按钮像youtube(如果点击它会给你div弹出和分享链接)我得到工作脚本为单一按钮工作但是当我把这个内部循环不正常工作当我点击4按钮将打开div起初按钮实际上,它必须打开第四div简而言之如果我点击第二个按钮应该打开2div点击第三个按钮3div应该打开所有
我的代码
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.share_button').mouseenter(function(e) {
$('.tooltip').show();
$('.share_this').fadeIn(200);
}).mouseleave(function(e) {
$('.share_this').fadeOut(200);
$('.tooltip').hide();
});
$('.share_button').click(function(){
$('#load_buttons_box').fadeIn();
});
});
$(document).ready(function(){
$('#shortLink').click(function(){
if($('#shortLink').is(':checked'))
{
$('#setURL').val($("#shareLink").val()); // to save previous link
var a = $("#shareLink").val();
$.post("getShortLink.php?value="+a, {
}, function(response){
$('#shareLink').val(response);
});
}
else
{
$('#shareLink').val($('#setURL').val());
}
});
$('.close').click(function(){
$('#load_buttons_box').fadeOut();
});
});
</script>
button {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#F6F6F6 none repeat scroll 0 0;
border:1px solid #CCCCCC;
cursor:pointer;
padding:5px;
height:2.0833em;
overflow:visible;
vertical-align:middle;
white-space:nowrap;
}
.share_button{background:url(share.png) center left no-repeat; padding-left:50px; }
.facebook_button{background:url(facebook.png) center left no-repeat; padding-left:20px; float:left }
.tooltip{ height:13px;display: none;width:120px; text-align:left;overflow:visible}
.share_this{
display: none;
font-size: 1.0em;
height:17px;
padding:7px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-align: center;
text-decoration: none;
width:60px;
background-color:#333333;
color:#FFFFFF;
text-shadow: #fff 0px 0px 20px;
}
#load_buttons_box{
border:solid #666666 1px; height:140px;
margin-top:19px;-moz-border-radius: 6px;
display:none;
padding-left:30px;
-webkit-border-radius: 6px; width:500px;
}
.twitter_button{background:url(twitter.png) center left no-repeat; padding-left:20px; float:left; margin-left:4px; }
.buzz_button{background:url(buzz.png) center left no-repeat; padding-left:25px; float:left; margin-left:4px; }
.bebo_button{background:url(bebo.gif) center left no-repeat; padding-left:21px; float:left; margin-left:4px; }
.stumbleupon_button{background:url(stumbleupon.gif) center left no-repeat; padding-left:20px; float:left; margin-left:4px; }
.share_button:hover, .facebook_button:hover, .twitter_button:hover, .buzz_button:hover, .bebo_button:hover, .stumbleupon_button:hover{
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.mesgbox{
padding-left:25px;
margin:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px; height:20px;
width:427px; float:left}
.close{
border:solid #666666 1px;
float:left;
width:20px; margin-top:6px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px; text-align:center;
font-size:12px; cursor:pointer;
background-color:0 1px 3px rgba(0,0,0,0.6);
}
.textBox{
background:url(ico.png) center left no-repeat;
height:22px;
width:300px;
padding-left:25px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
#shortLink{
margin-top:10px;
}
.textBox label{ cursor:pointer;}
<br clear="all" /><br clear="all" />
<h1>Youtube Style Share Button With URL Shortening using CURL, jQuery and PHP.</h1>
<br clear="all" /><br clear="all" />
<?php
for($a=0;$a<=5;$a++) { ?>
<div align="left" style="margin-left:50px;">
<div align="left" style="height:0px;">
<div class="tooltip">
<span class="share_this">
Share this video
</span>
</div>
</div>
<br clear="all" /><br clear="all" />
<button type="button" class="share_button" onclick=";return false;" id="like" >
<span>Share</span></button>
<br clear="all" />
<div id="load_buttons_box">
<div class="mesgbox"> </div>
<div class="close">X</div>
<br clear="all" />
<div class="textBox">
<input type="text" name="shareLink" id="shareLink" value="http://www.99points.info/2010/07/youtube-style-share-button-with-url-shortening-using-curl-jquery-and-php" size="60" />
<input type="hidden" name="setURL" id="setURL" value="" />
<label><input type="checkbox" name="shortLink" id="shortLink" />Short URL</label>
</div>
<br clear="all" /><br clear="all" />
<button type="button" class="facebook_button" onClick="window.open('http://www.facebook.com/sharer.php?u=http%3A//www.99points.info/2010/07/youtube-style-share-button-with-url-shortening-using-curl-jquery-and-php&t=Youtube Style Share Button With URL Shortening using CURL, jQuery and PHP','mywindow','width=800,height=500,left=0,top=0,screenX=0,screenY=100')" >
<span>Facebook</span></button>
<button type="button" class="twitter_button" onClick="window.open('http://twitter.com/home?status=Youtube Style Share Button using jQuery http%3A//www.99points.info/2010/07/youtube-style-share-button-with-url-shortening-using-curl-jquery-and-php','mywindow','width=800,height=500,left=0,top=0,screenX=0,screenY=100')" >
<span>Twitter</span></button>
<button type="button" class="buzz_button" onClick="window.open('http://www.google.com/buzz/post?url=http%3A//www.99points.info/2010/07/youtube-style-share-button-with-url-shortening-using-curl-jquery-and-php','mywindow','width=800,height=500,left=0,top=0,screenX=0,screenY=100')" >
<span>Buzz</span></button>
<button type="button" class="bebo_button" onClick="window.open('http://www.bebo.com/c/share?Url=http%3A//www.99points.info/2010/07/youtube-style-share-button-with-url-shortening-using-curl-jquery-and-php&Title=Youtube Style Share Button With URL Shortening using CURL, jQuery and PHP&TUUID=c583051f-6b2d-41ec-8dd0-a3a0ee1656c1&MID=8348657161','mywindow','width=800,height=500,left=0,top=0,screenX=0,screenY=100')" >
<span>Bebo</span></button>
<button type="button" class="stumbleupon_button" onClick="window.open('http://www.stumbleupon.com/submit?url=http%3A//www.99points.info/2010/07/youtube-style-share-button-with-url-shortening-using-curl-jquery-and-php&title=Youtube%20Style%20Share%20Button With%20URL%20Shortening%20using%20CURL%20jQuery%20and%20PHP','mywindow','width=800,height=500,left=0,top=0,screenX=0,screenY=100')" >
<span>StumbleUpon</span></button>
<br clear="all" />
</div>
</div>
<?php } ?>
这是我能做的最好的了。如果我错过了什么,请告诉我。
$(document).ready(function() {
$('.share_button').mouseenter(function(e) {
$(this).siblings().children('.tooltip').show();
$('.share_this').fadeIn(200);
}).mouseleave(function(e) {
$('.share_this').fadeOut(200);
$(this).siblings().children('.tooltip').hide();
});
$('.share_button').click(function(){
$(this).siblings('#load_buttons_box').fadeIn();
});
$('#shortLink').click(function(){
if($('#shortLink').is(':checked'))
{
$('#setURL').val($("#shareLink").val()); // to save previous link
var a = $("#shareLink").val();
$.post("getShortLink.php?value="+a, {
}, function(response){
$('#shareLink').val(response);
});
}
else
{
$('#shareLink').val($('#setURL').val());
}
});
$('.close').click(function(){
$(this).parent().fadeOut();
});
});