我正在尝试在脚本运行时在一个按钮的数量上加载一个“弹跳点 - 加载gif”。
我的问题:
代码示例:http://jsfiddle.net/v1pezwuh/1/
的Javascript
$(function() {
$(".vote").click(function()
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if(name=='up')
{
$(this).fadeIn(200).html('<img src="http://i.imgur.com/UOSBUX1.gif" align="absmiddle">');
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
} });
}
else if(name=='down')
{
$(this).fadeIn(200).html('<img src="http://i.imgur.com/UOSBUX1.gif" align="absmiddle">');
$.ajax({
type: "POST",
url: "down_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
}
});
}
return false;
});
});
CSS
body {
background: black;
}
.button-vote-up
{
display: inline-block;
background: #23d76f;
color: #fff;
text-decoration: none;
font-weight: 300;
font-color: white;
padding: 5%;
width: 100px;
outline: 0;
border-radius:10%;
box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75), inset 0px 2px 0px 0px rgba(192,255,216,0.5), inset 0px 0px 0px 2px rgba(82,227,99,0.85), 3px 3px 3px 1px rgba(0,0,0,0.15);
background-image: -moz-linear-gradient(top, #23d76f, #019c0f);
background-image: -webkit-linear-gradient(top, #23d76f, #019c0f);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#23d76f), to(#019c0f));
background-image: -ms-linear-gradient(top, #23d76f, #019c0f);
background-image: -o-linear-gradient(top, #23d76f, #019c0f);
background-image: linear-gradient(top, #23d76f, #019c0f);
text-shadow: -1px -1px 1px rgba(0,0,0,0.5);
}
.button-vote-up:hover
{
background: #2bfb83;
box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75), inset 0px 2px 0px 0px rgba(192,255,216,0.5), inset 0px 0px 0px 2px rgba(82,227,99,0.85), 3px 3px 3px 1px rgba(0,0,0,0.15);
background-image: -moz-linear-gradient(top, #2bfb83, #0cad32);
background-image: -webkit-linear-gradient(top, #2bfb83, #0cad32);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2bfb83), to(#0cad32));
background-image: -ms-linear-gradient(top, #2bfb83, #0cad32);
background-image: -o-linear-gradient(top, #2bfb83, #0cad32);
background-image: linear-gradient(top, #2bfb83, #0cad32);
}
.button-vote-up:active
{
background: #019c0f;
box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75), inset 0px 2px 0px 0px rgba(192,255,216,0.5), inset 0px 0px 0px 2px rgba(82,227,99,0.85), 3px 3px 3px 1px rgba(0,0,0,0.15);
background-image: -moz-linear-gradient(top, #019c0f, #23d76f);
background-image: -webkit-linear-gradient(top, #019c0f, #23d76f);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#019c0f), to(#23d76f));
background-image: -ms-linear-gradient(top, #019c0f, #23d76f);
background-image: -o-linear-gradient(top, #019c0f, #23d76f);
background-image: linear-gradient(top, #019c0f, #23d76f);
}
HTML
<div class='up'>
<a href='' class='vote' id='2' name='up'>
<div class="button-vote-up">
<div class="numvotes">27</div>
<div class="voteupdown">UP</div>
</div>
</a>
答案 0 :(得分:3)
替换
$(this).fadeIn(200).html('<img src="http://i.imgur.com/UOSBUX1.gif" align="absmiddle">');
与
$(this).children().first().fadeIn(200).html('<img src="http://i.imgur.com/UOSBUX1.gif" align="absmiddle">');
为了缩短它,您还可以使用.eq(0)
代替.first()
。
答案 1 :(得分:1)
这是因为您的函数中的objApp.ExecuteAction( idDlt, None, dialogMode )
是$(this)
按钮。而是使用$('.vote')
或按钮内的其他元素之一。