jquery関連の簡単なヘルプのリクエスト

Question

jqueryをクリックして投票数を更新する次のコードを変更しようとしています。しかし、下の画像に示すように、私は投票数をボックスの外に表示したいと思います。同じ緑色のボックスをクリックするようにしたいが、緑色のボックスから番号を表示する。私はそれを作るのが難しいです。

ここでは、元のコードは次のとおりです。 のjQuery：

<script type="text/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="dot.gif" align="absmiddle">'); 
$.ajax({ 
    type: "POST", 
    url: "up_vote.php", 
    data: dataString, 
    cache: false, 

    success: function(html) { 
    parent.html(html); 
    } }); 
}else{ 
$(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">'); 
$.ajax({ 
    type: "POST", 
    url: "down_vote.php", 
    data: dataString, 
    cache: false, 

    success: function(html) { 
     parent.html(html); 
    } 
}); 
} 
return false; 
}); 
}); 
</script> 

、ここでは、htmlの一部です：

<div id="main"> 
<div class="box1"> 
<div class='up'><a href="" class="vote" id="<?php echo $mes_id; ?>" name="up"><?php echo $up; ?></a></div> 
</div> 
<div class='box2' ><?php echo $msg; ?></div> 
</div> 

ここでは、CSSがあります：

<style type="text/css"> 
body{ 
font-family:'Georgia', Times New Roman, Times, serif; 
} 
#main{ 
height:80px; border:1px dashed #29ABE2;margin-bottom:7px; 
width:500px; 
} 

a{ 
color:#DF3D82; 
text-decoration:none; 
} 

a:hover{ 
color:#DF3D82; 
text-decoration:underline; 
} 

.up{ 
height:40px; font-size:24px; text-align:center; background-color:#009900; margin-bottom:2px; 
-moz-border-radius: 6px;-webkit-border-radius: 6px; 
} 
.up a{ 
color:#FFFFFF; 
text-decoration:none; 
} 

.up a:hover{ 
color:#FFFFFF; 
text-decoration:none; 
} 

.down{ 
height:40px; font-size:24px; text-align:center; background-color:#cc0000; margin-top:2px; 
-moz-border-radius: 6px;-webkit-border-radius: 6px; 
} 

.down a{ 
color:#FFFFFF; 
text-decoration:none; 
} 

.down a:hover{ 
color:#FFFFFF; 
text-decoration:none; 
} 

.box1{ 
float:left; height:80px; width:50px; 
} 

.box2{ 
float:left; width:440px; text-align:left; 
margin-left:10px;height:60px;margin-top:10px; 
font-weight:bold; 
font-size:18px; 
} 


</style> 

を助けるためありがとうございました。

Answer 1

ここにはfiddleがあります。

つまり、数値はparentで定義される要素の内部に入ります。 http://jsfiddle.net/CE4xh/1/：parent.append(html)

更新もう少しいじる後

でAJAXコールバックの内側にparent = $(this).parents('.box1')とparent = $(this)とparent.html(html)を交換してください。

<div class="up">の後に<div class="number"></div>を追加しました。これは数字のプレースホルダーです。 CSSクラス.numberがあり、赤色で中央に配置されています。このコードでは、ajaxコールバックを変更する必要はありません。設定する必要があります。parent = $(this).parents('.box1').find('.number')