javascript - 单击时在按钮上方显示 "bouncing dot loading gif"

Question

我正在尝试在脚本运行时在按钮的编号上加载“弹跳点 - 加载 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>

Answer 1

替换

$(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">');

jsfiddle

为了让它更短一些，您还可以使用 .eq(0) 而不是 .first()。